【Vue2+3入门到实战】（4）Vue基础之指令修饰符 、v-bind对样式增强的操作、v-model应用于其他表单元素 详细示例

目录

    • 一、今日学习目标
      • 1.指令补充
    • 二、指令修饰符
      • 1.什么是指令修饰符？
      • 2.按键修饰符
      • 3.v-model修饰符
      • 4.事件修饰符
    • 三、v-bind对样式控制的增强-操作class
      • 1.语法：
      • 2.对象语法
      • 3.数组语法
      • 4.代码练习
    • 四、京东秒杀-tab栏切换导航高亮
      • 1.需求：
      • 2.准备代码:
      • 3.思路：
    • 五、v-bind对有样式控制的增强-操作style
      • 1.语法
      • 2.代码练习
      • 3.进度条案例
    • 六、v-model在其他表单元素的使用
      • 1.讲解内容：
      • 2.代码准备

在这里插入图片描述

一、今日学习目标

1.指令补充

  1. 指令修饰符
  2. v-bind对样式增强的操作
  3. v-model应用于其他表单元素

二、指令修饰符

1.什么是指令修饰符？

​ 所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

2.按键修饰符

  • @keyup.enter —>当点击enter键的时候才触发，键盘回车监听

代码演示：

  <div id="app">
    <h3>@keyup.enter  →  监听键盘回车事件</h3>
    <input v-model="username" type="text">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        
      }
    })
  </script>

3.v-model修饰符

  • v-model.trim —>去除首位空格
  • v-model.number —>转数字

4.事件修饰符

  • @事件名.stop —> 阻止冒泡
  • @事件名.prevent —>阻止默认行为
  • @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
 <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 20px;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>

 <div id="app">
    <h3>v-model修饰符 .trim .number</h3>
    姓名：<input v-model="username" type="text"><br>
    年纪：<input v-model="age" type="text"><br>

    
    <h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click="sonFn" class="son">儿子</div>
    </div>

    <h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click href="http://www.baidu.com">阻止默认行为</a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn () {
          alert('老父亲被点击了')
        },
        sonFn (e) {
          // e.stopPropagation()
          alert('儿子被点击了')
        }
      }
    })
  </script>

三、v-bind对样式控制的增强-操作class

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。

1.语法：

<div> :class = "对象/数组">这是一个div</div>

2.对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

​ 适用场景：一个类名，来回切换

3.数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

使用场景:批量添加或删除类

4.代码练习

 <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      font-size: 30px;
      margin-top: 10px;
    }
    .pink {
      background-color: pink;
    }
    .big {
      width: 300px;
      height: 300px;
    }
  </style>


<div id="app">
    <!--绑定对象-->
    <div class="box">程序员</div>
    <!--绑定数组-->
    <div class="box">程序员</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

四、京东秒杀-tab栏切换导航高亮

1.需求：

​ 当我们点击哪个tab页签时，哪个tab页签就高亮

2.准备代码:

 <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }
    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }
    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }
    li a.active {
      background-color: #e01222;
      color: #fff;
    }

  </style>

<div id="app">
    <ul>
      <li><a class="active" href="#">京东秒杀</a></li>
      <li><a href="#">每日特价</a></li>
      <li><a href="#">品类秒杀</a></li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]
      }
    })
  </script>

3.思路：

1.基于数据，动态渲染tab（v-for）

2.准备一个下标 记录高亮的是哪一个 tab

3.基于下标动态切换class的类名

在这里插入图片描述

五、v-bind对有样式控制的增强-操作style

1.语法

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

2.代码练习

<style>
    .box {
      width: 200px;
      height: 200px;
      background-color: rgb(187, 150, 156);
    }
 </style>
 <div id="app">
    <div class="box"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

3.进度条案例

 <style>
    .progress {
      height: 25px;
      width: 400px;
      border-radius: 15px;
      background-color: #272425;
      border: 3px solid #272425;
      box-sizing: border-box;
      margin-bottom: 30px;
    }
    .inner {
      width: 50%;
      height: 20px;
      border-radius: 10px;
      text-align: right;
      position: relative;
      background-color: #409eff;
      background-size: 20px 20px;
      box-sizing: border-box;
      transition: all 1s;
    }
    .inner span {
      position: absolute;
      right: -20px;
      bottom: -25px;
    }
  </style>

<div id="app">
    <div class="progress">
      <div class="inner">
        <span>50%</span>
      </div>
    </div>
    <button>设置25%</button>
    <button>设置50%</button>
    <button>设置75%</button>
    <button>设置100%</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

在这里插入图片描述

六、v-model在其他表单元素的使用

1.讲解内容：

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框  input:text   ——> value
文本域  textarea	 ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...

2.代码准备

 <style>
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
 <div id="app">
    <h3>小黑学习网</h3>
    姓名：
      <input type="text"> 
      <br><br>
    是否单身：
      <input type="checkbox"> 
      <br><br>
    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input type="radio">男
      <input type="radio">女
      <br><br>
    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select>
        <option>北京</option>
        <option>上海</option>
        <option>成都</option>
        <option>南京</option>
      </select>
      <br><br>
    自我描述：
      <textarea></textarea> 
    <button>立即注册</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/271174.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

小白的实验室服务器深度学习环境配置指南

小白的实验室服务器深度学习环境配置指南

安装nvidia 本文在ubuntu server 22.04上实验成功&#xff0c;其他版本仅供参考 注意&#xff0c;本文仅适用于ubuntu server&#xff0c;不需要图形界面&#xff0c;没有对图形界面进行特殊考虑和验证&#xff01;依赖图形操作界面的读者慎用 查看是否安装了gcc gcc -v若没…
阅读更多...
如何快速删除pdf周围的空白

如何快速删除pdf周围的空白

问题&#xff1a;写论文往往需要pdf格式的图片&#xff0c;但pdf往往四周存在大量空白需要手动截图很麻烦 解决&#xff1a; 打开命令行输入&#xff1a;pdfcrop 图片名.pdf
阅读更多...
【Mysql】InnoDB统计数据的收集（十三）

【Mysql】InnoDB统计数据的收集（十三）

我们前边在计算查询成本的时候会用到一些统计数据&#xff0c;比如通过 SHOW TABLE STATUS 可以看到关于表的统计数据&#xff0c;通过 SHOW INDEX 可以看到关于某个索引的统计数据&#xff0c;那么这些统计数据是怎么来的呢&#xff1f;本章节将分享 InnoDB 存储引擎的统计数据…
阅读更多...
深圳锐科达SIP矿用电话模块SV-2801VP

深圳锐科达SIP矿用电话模块SV-2801VP

深圳锐科达SIP矿用电话模块SV-2801VP 一、简介 SV-2800VP系列模块是我司设计研发的一款用于井下的矿用IP音频传输模块&#xff0c;可用此模块打造一套低延迟、高效率、高灵活和多扩展的IP矿用广播对讲系统&#xff0c;亦可对传统煤矿电话系统加装此模块&#xff0c;进行智能化…
阅读更多...
在Vue3中使用vue-qrcode库实现二维码生成

在Vue3中使用vue-qrcode库实现二维码生成

本文主要介绍在Vue3中使用qrcode库实现二维码生成的方法。 目录 一、基础用法实现vue-qrcode库的参数介绍 在Vue3中实现二维码生成需要使用第三方库来处理生成二维码的逻辑。常用的库有 qrcode和 vue-qrcode。 一、基础用法实现 在Vue3中使用vue-qrcode库实现二维码生成的方…
阅读更多...
记录一次云主机故障排查

记录一次云主机故障排查

云上某云主机&#xff0c;在安全组test-a中&#xff0c;同一安全组下还有另外两台主机。 从本地可以ping 通另外两台主机的公网地址。但是不能ping通这个主机的公网地址。 与是重启主机&#xff0c;发现问题依然存在。依然是不能ping 通&#xff0c;主机上部署的业务也不能访…
阅读更多...
LabVIEW在齿轮箱故障诊断中的应用

LabVIEW在齿轮箱故障诊断中的应用

LabVIEW在齿轮箱故障诊断中的应用 在现代机械工业中&#xff0c;齿轮箱作为重要的传动设备&#xff0c;其性能稳定性对整体机械系统的运行至关重要。故障的及时诊断和处理不仅保障了设备的稳定运行&#xff0c;还减少了维护成本。利用LabVIEW强大数据处理和仿真能力&#xff0…
阅读更多...
新版IDEA中Git的使用（二）

新版IDEA中Git的使用（二）

说明&#xff1a;前面介绍了在新版IDEA中Git的基本操作&#xff0c;本文介绍关于分支合并、拉取等操作&#xff1b; 例如&#xff0c;现在有一个项目&#xff0c;分支如下&#xff1a; main&#xff1a;主分支&#xff1b; dev&#xff1a;开发分支&#xff1b; test&#x…
阅读更多...
Springboot整合MVC进阶篇

Springboot整合MVC进阶篇

一、概述 1.1SpringBoot整合SpringMVC配置 SpringBoot对SpringMVC的配置主要包括以下几个方面&#xff1a; 自动配置&#xff1a;SpringBoot会自动配置一个嵌入式的Servlet容器&#xff08;如Tomcat&#xff09;&#xff0c;并为我们提供默认的SpringMVC配置。这样我们无需手动…
阅读更多...
【Java、Python】获取电脑当前网络IP进行位置获取（附源码）

【Java、Python】获取电脑当前网络IP进行位置获取（附源码）

我相信看到这篇博客的时候心里肯定是想解决自己的一个问题的&#xff0c;而这篇博客我就以简单快速的方式解决这些烦恼&#xff01; 一、获取当前IP 在Java中自带了一些自己的流对象来获取当前的IP地址&#xff0c;不多说我们直接上代码。 //获取当前网络ip地址 ipAddress Ine…
阅读更多...
在k8s中将gitlab-runner的运行pod调度到指定节点

在k8s中将gitlab-runner的运行pod调度到指定节点

本篇和前面的 基于helm的方式在k8s集群中部署gitlab 具有很强的关联性&#xff0c;因此如果有不明白的地方可以查看往期分享&#xff1a; 基于helm的方式在k8s集群中部署gitlab - 部署基于helm的方式在k8s集群中部署gitlab - 备份恢复基于helm的方式在k8s集群中部署gitlab - 升…
阅读更多...
论文阅读——X-Decoder

论文阅读——X-Decoder

Generalized Decoding for Pixel, Image, and Language Towards a Generalized Multi-Modal Foundation Model 1、概述 X-Decoder没有为视觉和VL任务开发统一的接口&#xff0c;而是建立了一个通用的解码范式&#xff0c;该范式可以通过采用共同的&#xff08;例如语义&#…
阅读更多...
实战：朴素贝叶斯文本分类器搭建与性能评估

实战：朴素贝叶斯文本分类器搭建与性能评估

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…
阅读更多...
生成超清分辨率视频，南洋理工开源Upscale-A-Video

生成超清分辨率视频，南洋理工开源Upscale-A-Video

大模型在生成高质量图像方面表现出色,但在生成视频任务中&#xff0c;经常会面临视频不连贯、图像模糊、掉帧等问题。 这主要是因为生成式抽样过程中的随机性,会在视频序列中引入无法预测的帧跳动。同时现有方法仅考虑了局部视频片段的时空一致性,无法保证整个长视频的整体连贯…
阅读更多...
基于电商场景的高并发RocketMQ实战-Broker写入读取流程性能优化总结、Broker基于Pull模式的主从复制原理

基于电商场景的高并发RocketMQ实战-Broker写入读取流程性能优化总结、Broker基于Pull模式的主从复制原理

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 【11来了】文章导读地址&#xff1a;点击查看文章导读&#xff01; &#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f3…
阅读更多...
关于OpenCV中 CV_Assert() 的使用引起程序中止/崩溃问题

关于OpenCV中 CV_Assert() 的使用引起程序中止/崩溃问题

CV_Assert() 的作用是&#xff1a;若括号中的表达式值为 false &#xff0c;则返回一个错误信息&#xff0c;并终止程序执行。 但是 CV_Assert() 与 assert 不同&#xff0c;CV_Assert() 会通过异常抛出&#xff0c;所以如果使用 CV_Assert()&#xff0c;可以通过捕获异常而不是…
阅读更多...
三列布局 css

三列布局 css

实现如下图的三列布局&#xff1a; .box {width:1400px;margin:0 auto;padding-bottom:40px;> .left {float:left;width:180px;margin-top:100px;text-align:center;}> .center {float:left;margin-top:100px;margin-left:130px;item-box {float:left;text-align:left;…
阅读更多...
oom问题

oom问题

问题描述 虚拟机集群节点上pod报oom&#xff0c;最后pod被驱逐&#xff0c;主节点上查看kubectl top node的mem使用率很高&#xff0c;重启系统后&#xff0c;mem会降下来&#xff0c;但还会慢慢增长。 node节点上查看 /sys/fs/cgroup/memory/memory.usage_in_bytes内存使用超…
阅读更多...
Spring Boot简单多线程定时任务实现 | @Async | @Scheduled

Spring Boot简单多线程定时任务实现 | @Async | @Scheduled

Spring Boot简单多线程定时任务实现 实现步骤 1 创建一个Spring Boot项目 2 定义定时任务&#xff1a; package com.jmd.timertasktest.task;import org.springframework.context.annotation.Configuration; import org.springframework.scheduling.annotation.Async; impor…
阅读更多...
GenerateBlocks Pro插件 构建更好的WordPress网站

GenerateBlocks Pro插件 构建更好的WordPress网站

GenerateBlocks Pro插件 构建更好的WordPress网站 GenerateBlocks Pro插件是一个 WordPress 插件&#xff0c;几乎可以完成任何事情&#xff0c;可让您创建轻量级和多功能的网站。由与流行且快速的 GeneratePress 主题相同的创作者构建&#xff0c;该插件不负众望。使用 Genera…
阅读更多...
最新文章

Copyright @ 2022~2023