Vue-常用指令

前端青山2024-11-28 8:47

​🌈个人主页：前端青山

🔥系列专栏：Vue篇

🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来Vue篇专栏内容:Vue-常用指令

目录

[1.1 v-cloak](#1.1 v-cloak)

[1.2 双向数据绑定指令 v-model](#1.2 双向数据绑定指令 v-model)

[1.3 v-once](#1.3 v-once)

[1.4 绑定属性 v-bind](#1.4 绑定属性 v-bind)

[1.5 v-on](#1.5 v-on)

[1.5.1 基本使用](#1.5.1 基本使用)

[1.5.2 事件修饰符](#1.5.2 事件修饰符)

[1.5.3 按键修饰符](#1.5.3 按键修饰符)

[1.5.4 自定义修饰符](#1.5.4 自定义修饰符)

[1.6 循环分支（判断）指令](#1.6 循环分支（判断）指令)

[1.6.1 循环指令](#1.6.1 循环指令)

[1.6.2 分支指令 - 判断条件](#1.6.2 分支指令 - 判断条件)

[1.7 综合案例：简易购物车](#1.7 综合案例：简易购物车)

[1.8 样式绑定](#1.8 样式绑定)

[1.8.1 class样式绑定](#1.8.1 class样式绑定)

[1.8.2 style样式处理](#1.8.2 style样式处理)

[1.9 v-model](#1.9 v-model)

[1.10 综合案例： 购物车全选/全不选](#1.10 综合案例： 购物车全选/全不选)

1.1 v-cloak

这个指令保持在元素上直到关联实例结束编译。

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

如果网络不好的情况下，网页先显示 {{ message }}，如果vue加载完毕，显示 hello vue

闪烁

html 复制代码 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    [v-cloak] { /* 如果未加载完vue，{{ message }} 不显示 */
      display: none;
    }
  </style>
</head>
<body>
  <!-- 如果多个元素都使用到了 {{}}, 可以在共同的父级元素上加 指令 v-cloak -->
  <div id="app"  v-cloak>
    {{ message }}
  </div>
</body>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello vue'
    }
  })
</script>

1.2 双向数据绑定指令 v-model

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

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

尽管有些神奇，但 v-model 本质上不过是语法糖。

它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

  • text 和 textarea 元素使用 value property 和 input 事件；

  • checkbox 和 radio 使用 checked property 和 change 事件；

  • select 字段将 value 作为 prop 并将 change 作为事件。

html 复制代码 
<body>
  <div id="app">
    <div>
      用户名： 
      <input type="text" v-model="username"> {{ username }}
    </div>
    <div>
      密码： 
      <input type="password" v-model="password"> {{ password }}
    </div>
    <div>
      性别:
      <input type="radio" name="sex" value="1" v-model="sex"> 男
      <input type="radio" name="sex" value="0" v-model="sex"> 女 --- {{ sex }}
    </div>
    <div>
      爱好:
      <input type="checkbox" name="hobby" value="篮球" v-model="hobby"> 篮球
      <input type="checkbox" name="hobby" value="排球" v-model="hobby"> 排球 
      <input type="checkbox" name="hobby" value="网球" v-model="hobby"> 网球 --- {{ hobby }}
    </div>
    <div>
      阶段:
      <select v-model="lesson">
        <option value="1">1阶段</option>
        <option value="2">2阶段</option>
        <option value="3">3阶段</option>
      </select> - {{ lesson }}
    </div>
    <input type="checkbox" v-model="flag"> 已阅读****协议 --- {{ flag }}
    <div>
      <button v-on:click="register">注册</button>
    </div>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      username: '吴大勋',
      password: '123456',
      sex: "1",
      hobby: [],
      lesson: 3,
      flag: true
    },
    methods: { // 所有vue自定义的事件
      register () {
        console.log({
          username: this.username,
          password: this.password,
          sex: this.sex === '1' ? '男' : '女',
          hobby: this.hobby,
          lesson: this.lesson == '3' ? '三阶段' : this.lesson == '2' ? '二阶段' : '一阶段',
        })
      }
    }
  })
</script>

注意：

  • 1.checkbox，如果你的数据类型是数组类型，代表的就是 多选框（爱好，兴趣）；如果数据类型是boolean类型，true代表的是选中的状态，false代表的是未选中（注册时已阅读 协议，购物车的选中状态）

  • 2.select下拉选择框：如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为"未选中"状态。

    在 iOS 中，这会使用户无法选择第一个选项。

    因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐提供一个值为空的禁用选项。

    复制代码 
    <div>
阶段:
  <select v-model="lesson">
    <option disabled value="">请选择</option>
    <option value="1">1阶段</option>
    <option value="2">2阶段</option>
    <option value="3">3阶段</option>
    </select> - {{ lesson }}
</div>

1.3 v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

这可以用于优化更新性能。

html 复制代码 
<body>
  <div id="app">
    <input type="text" v-model="username"> {{ username }}
    <div v-once>
      {{ username }}
    </div>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      username: '1111'
    }
  })
</script>

1.4 绑定属性 v-bind

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

vue中当遇到变量，boolean类型或者number类型时，需要使用绑定属性

html 复制代码 
<body>
  <div id="app">
    <!-- 变量 -->
    <img v-bind:src="imgsrc" alt=""> 
    <!-- number类型 -->
    <div v-bind:num="10"></div>
    <!-- boolean类型 -->
    <div v-bind:flag="true"></div>  
    <!-- 缩写 -->
    <div :flag="true"></div>
​
​
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      imgsrc: 'https://cn.vuejs.org/images/logo.png'
    }
  })
</script>

1.5 v-on

1.5.1 基本使用

**作用：**绑定事件监听器（事件绑定）

html 复制代码 
<!-- 常规写法 --> 
<button v-on:click="num++"></button> 
<!-- 缩写 --> 
<button @click="num++"></button>
<!-- 事件处理函数调用：直接写函数名 --> 
<button @click="say"></button> 
<!-- 事件处理函数调用：常规调用,可以传递参数 --> 
<button @click="alert('123')"></button>

如果事件处理函数为自定义函数，则需要先进行定义，定义的方式如下：

html 复制代码 
... 
data: { 
... 
},
methods: { 
  functionName: function(arg1,arg2,arg3,...) { 
    // something to do 
  },
  .... 
}

注意：事件绑定 v-on 属性表达式中切记不能直接写业务逻辑，例如 @click="alert('123')"

事件处理函数传参

html 复制代码 
<!-- 事件处理函数调用：直接写函数名 -->
<button @click="say"></button> 
<!-- 事件处理函数调用：常规调用 -->
<button @click="say('hi',$event)"></button>

在不传递自定义参数的时候，上述两种用法均可以使用；但是如果需要传递自定义参数的话，则需要使用第2种方式。

事件对象的传递与接收注意点

如果事件直接使用函数名并且不写小括号，那么默认会将事件对象作为唯一参数进行传递

如果使用常规的自定义函数调用（只要写了小括号），那么如果需要使用事件对象则必须作为最后一个参数进行传递，且事件对象的名称必须是"$event"

html 复制代码 
<body>
  <div id="app">
    <button v-on:click="num++">+</button>{{ num }}
    <button @click="num--">-</button>
    <!-- 事件绑定 v-on 属性表达式中切记不能直接写业务逻辑，例如 @click="alert('123')" -->
    <button @click="alert('123')">vue</button>
    <button onclick="alert('456')">js</button>
    <!-- 事件处理函数传参 -->
    <!-- 事件处理函数调用：直接写函数名,如果不需要参数，可以不写（） -->
    <button @click="say1">没有参数</button> 
    <!-- 事件处理函数调用：常规调用, 如果需要使用时间对象，记得一定传的是 $event -->
    <button @click="say2('hi', $event)">有参数和事件对象</button>
    <!-- 如果想要使用默认的事件对象，不要加（），在定义函数时有默认的event参数 -->
    <button @click="say3">查看默认的事件对象</button>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      num: 100
    },
    methods: {
      say1 () {
        console.log('没有参数')
      },
      say2 (str, event) {
        console.log('有参数和事件对象, str-' + str + '，event-' + event)
        console.log(event)
      },
      say3 (event) {
        console.log(event)
      }
    },
  })
</script>


<!--练习-->
<style> 
  #big {width: 300px; height: 300px; background-color: red; }
  #mid {width: 200px; height: 200px; background-color: green; }
  #sma {width: 100px; height: 100px; background-color: pink; } 
</style> 
<body>
  <div id="app">
    <div id="big" @click="say('大娃',$event)"> 
      <div id="mid" @click="say('二娃',$event)"> 
        <div id="sma" @click="say('三娃',$event)"></div> 
      </div> 
    </div> 
  </div> 
</body> 
<script src="lib/vue.js"></script> 
<script> 
  new Vue({ 
    el: '#app', 
    data: { },
    methods:{ 
      say: function(name,event){ 
        console.log('你点了' + name); 
      } 
    } 
  }) 
</script>

1.5.2 事件修饰符

含义：用来处理事件的特定行为

使用示例：

html 复制代码 
<!-- 停止冒泡 --> 
<button @click.stop="doThis"></button> 
<!-- 阻止默认行为 --> 
<button @click.prevent="doThis"></button> 
<!-- 串联修饰符 --> 
<button @click.stop.prevent="doThis"></button>

更多事件修饰符请参考官方文档：https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

  • .stop

  • .prevent

  • .capture

  • .self

  • .once

  • .passive

html 复制代码 
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
​
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
​
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
​
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
​
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
​
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
html 复制代码 
<body>
  <div id="app">
    <!-- 子元素 阻止冒泡 事件对象 -->
    <!-- <div @click="clickDiv" style="width: 200px;height: 200px;background-color: #f66;">
      <button @click="clickBtn">按钮</button>
    </div> -->
    <!-- vue 事件修饰符阻止冒泡 子元素添加 stop -->
    <!-- <div @click="clickDiv" style="width: 200px;height: 200px;background-color: #f66;">
      <button @click.stop="clickBtn">按钮</button>
    </div> -->
    <!-- vue 事件修饰符阻止冒泡 父元素添加 self -->
    <div @click.self="clickDiv" style="width: 200px;height: 200px;background-color: #f66;">
      <button @click="clickBtn">按钮</button>
    </div>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  
  const app = new Vue({
    el: '#app',
    data: {},
    methods: {
      // 子元素 阻止冒泡 事件对象
      // clickDiv () {
      //   console.log('div')
      // },
      // clickBtn (event) {
      //   event.stopPropagation()
      //   console.log('button')
      // }
      // vue 事件修饰符阻止冒泡 子元素添加 stop
      // clickDiv () {
      //   console.log('div')
      // },
      // clickBtn () {
      //   console.log('button')
      // }
      // vue 事件修饰符阻止冒泡 父元素添加 self
      clickDiv () {
        console.log('div')
      },
      clickBtn () {
        console.log('button')
​
      }
    }
  })
</script>

1.5.3 按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

html 复制代码 
<!-- 只有在 `key` 是 `Enter` 回车键的时候调用 --> 
<input v-on:keyup.enter="submit"> 
<!-- 只有在 `key` 是 `Delete` 回车键的时候调用 --> 
<input v-on:keyup.delete="handle">

更多按键修饰符请参考官方文档：

https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

bash 复制代码 
.enter
.tab
.delete (捕获"删除"和"退格"键)
.esc
.space
.up
.down
.left
.right
html 复制代码 
<body>
  <div id="app">
    <input type="text" onkeyup="changeJsVal(event)">
    <input type="text" @keyup="changeVueVal">
    <!-- 按键修饰符 -->
    <!-- <input type="text" @keyup.enter="changeVue2Val"> -->
    <input type="text" @keyup.13="changeVue2Val">
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  function changeJsVal (event) {
    // console.log(event)
    if (event.keyCode == 13) {
      console.log(111)
    }
  }
  const app = new Vue({
    el: '#app',
    data: {},
    methods: {
      changeVueVal (event) {
        if (event.keyCode == 13) {
          console.log(222)
        }
      },
      changeVue2Val () {
        console.log(333)
      }
    }
  })
</script>

1.5.4 自定义修饰符

需要配合 系统修饰键 完成

https://cn.vuejs.org/v2/guide/events.html#%E7%B3%BB%E7%BB%9F%E4%BF%AE%E9%A5%B0%E9%94%AE

按键修饰符还有一个额外的细节需要注意，Vue内置的按键修饰符是有限的，如果还需要用到其他键盘按键的修饰符，则此时我们可以通过全局对象config.keyCodes自行定义按键修饰符，例如：

java 复制代码 
Vue.config.keyCodes.KEYNAME = 112

当然，在实际使用的时候也允许我们不去定义修饰符而直接去使用按键对应的数字（按键码），例如：

java 复制代码 
<input v-on:keyup.13="submit">

但是这种方式直接记忆数字与按键的关系，不是很方便。已经被官方废弃了，并且可能在最新的浏览器中不被支持。参考地址：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

html 复制代码 
<body>
  <div id="app">
    <!-- 按住 alt + c -->
    <input type="text" @keyup.alt.67="test">
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  
  const app = new Vue({
    el: '#app',
    data: {},
    methods: {
      test () {
        console.log('啦啦啦')
      }
    }
  })
</script>

1.6 循环分支（判断）指令

1.6.1 循环指令

**作用：**根据一组数组或对象的选项列表进行渲染。

**指令：**v-for

  • 数组遍历使用示例：
html 复制代码 
<!-- 模板部分 --> 
<ul>
  <!-- 直接取值 -->
    <li v-for='item in fruits'>{{item}}</li> 
    <!-- 带索引 --> 
    <li v-for='(item,index) in fruits'>{{item}}{{index}}</li> 
</ul> 
<!-- JavaScript部分 --> 
...... 
data: { 
    fruits: ['apple','pear','banana','orange'] 
}
......

细节：key的作用，提高性能，不影响显示效果（ 如果没有id，可以考虑使用索引替代 ）

html 复制代码 
<ul>
  <li :key='item.id' v-for='(item,index) in fruits'>{{item}}</li> 
</ul>
  • 对象遍历使用示例：
html 复制代码 
<!-- 模板部分 --> 
<ul>
  <li v-for='(value,key,index) in obj'>
    {{value + '-' + key + '-' + index}} 
  </li> 
</ul> 
<!-- JavaScript部分 --> 
...... 
data: { 
  obj: {
    username: 'zhangsan', 
    age: 28, 
    gender: 'male' 
  } 
}
......

示例代码：

html 复制代码 
<body>
  <div id="app">
    <!-- 遍历时建议添加 属性 key，给每一个元素都添加了标识 (十把锁十把钥匙) -->
    <!-- 如果没有唯一值时，使用索引值代替 key -->
    <!-- 数组 （item, index） of arr -->
    <!-- 对象 (value, key, index) of arr -->
    <!-- 遍历fruits -->
    <ul>
      <li v-for="(item, index) of fruits" :key="index">{{ item }}</li>
    </ul>
    <!-- 遍历 obj-->
    <ul>
      <li v-for="(value, key) of obj" :key="index">
        {{ key }}: {{ value }}
      </li>
    </ul>
    <!-- 遍历arr -->
    <ul>
      <li v-for="item of arr" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      fruits: ['apple', 'pear', 'banana', 'orange'],
      obj: {
        username: 'zhangsan', 
        age: 28, 
        gender: 'male' 
      },
      arr: [
        { id: 1, name: '石越' },
        { id: 2, name: '张鸣涛' }
      ]
    }
  })
</script>
html 复制代码 
<!--练习-->
<body>
  <div id="app"> 
    <div>
      <ul>
        <li :key="index" v-for="(item,index) in cars">{{item}}</li> 
      </ul> 
    </div> 
    <div>
      <ul>
        <li :key="index" v-for="(item,key,index) in user">{{key}}： {{item}}</li>
      </ul> 
    </div> 
  </div> 
</body> 
<script src="lib/vue.js"></script>
<script> 
  new Vue({ 
    el: '#app',
    data: { 
      cars: ['bmw','aodi','benchi','haima'], 
      user: { 
        username: 'zhangsan', 
        gender: 'mele',//性别，sex 
        age: 22 
      } 
    } 
  })
</script>

1.6.2 分支指令 - 判断条件

**作用：**根据表达式的布尔值(true/false)进行判断是否渲染该元素

  • v-if

  • v-else

  • v-else-if

上述三个指令是分支中最常见的。根据需求，v-if可以单独使用，也可以配合v-else一起使用，也可以配合v-else-if和v-else一起使用。

  • v-show

v-show是根据表达式之真假值，切换元素的 display CSS属性。

使用示例：

html 复制代码 
<div v-if="score >= 90"> 优秀 </div> 
<div v-else-if="score >= 80 && score < 90"> 良好 </div> 
<div v-else-if="score >= 70 && score < 80"> 一般 </div> 
<div v-else> 不及格 </div> 
<!-- v-show --> 
<div v-show='flag'>测试v-show</div> 
<!-- JavaScript部分 --> 
...... data: { 
    score: 88, 
    flag:false 
}
......

思考：v-if系列与v-show的区别是什么？

v-if：控制元素是否渲染

v-show：控制元素是否显示（已经渲染，display:none;）

v-if系列指令、v-show指令可以与v-for指令结合起来使用（循环+分支）。例如：

html 复制代码 
<body>
  <div id="app">
    <!-- v-if v-else-if v-else -->
    <!-- v-show -->
    <input type="text" v-model="grade">
    <div v-if="grade >= 90">优</div>
    <div v-else-if="grade >= 80">良</div>
    <div v-else-if="grade >= 70">中</div>
    <div v-else-if="grade >= 60">差</div>
    <div v-else>不及格</div>
    <hr>
    <div v-show="grade >= 90">优</div>
    <div v-show="grade >= 80 && grade < 90">良</div>
    <div v-show="grade >= 70 && grade < 80">中</div>
    <div v-show="grade >= 60 && grade < 70">差</div>
    <div v-show="grade < 60">不及格</div>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      grade: 98
    }
  })
</script>
复制代码 
​

通过审查元素观察 v-if 以及 v-show的区别

1.7 综合案例：简易购物车

细节：

展示基本的商品信息

计算每个商品的小计

商品数量的加、减操作

+：增加商品数量，同时更新小计

-：减少商品数量，同时更新小计，如果本身为"1"，-不可以再次点击

如果需要在Vue实例中访问自身data属性中的数据，可以使用以下方式：

this.xxxxx

this.$data.xxxxx

this._data.xxxxx

参考数据源

javascript 复制代码 
var cartData = [ { 
  id: 1, 
  name: '小米', 
  price: 100, 
  num: 1
}, { 
  id: 2, 
  name: '华为', 
  price: 200, 
  num: 1 
},{ 
  id: 3, 
  name: '联想',
  price: 300, 
  num: 1 
} ]

参考核心代码

html 复制代码 
<body>
  <div id="app">
    <table border="1">
      <tr>
        <th>商品id</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>操作</th>
        <th>小计</th>
      </tr>
      <tr v-for="(item, index) of cartData" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button :disabled="item.num<=1" @click="item.num-=1">-</button>
          {{ item.num }}
          <button @click="item.num+=1">+</button>
          <button @click="deleteItem(index)">X</button>
        </td>
        <td>
          {{ item.num * item.price }}
        </td>
      </tr>
    </table>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  const cartData = [
    {id:1,name:'苹果',num:1,price:100}, 
    {id:2,name:'小米',num:1,price:200}, 
    {id:3,name:'华为',num:1,price:300}
  ]
  const app = new Vue({
    el: '#app',
    data: {
      cartData
    },
    methods: {
      deleteItem (index) {
        confirm('确认删除吗') && this.cartData.splice(index, 1)
      }
    }
  })
</script>

&emsp;表示tab，一个顶四个nbsp;

1.8 样式绑定

1.8.1 class样式绑定

  • 对象语法（ 用于控制开关切换 ）

    html 复制代码 
    <style> 
  /* CSS片段 */ 
  .active { color: red; }
</style>
<!-- HTML片段 --> 
<div v-bind:class="{active: isActive}">class样式</div>
<script type='text/javascript'> 
  // JavaScript片段 
  data: { 
    isActive: true
  }
</script>

  • 数组写法

    html 复制代码 
    <style>
  /* CSS片段 */ 
  .active { 
    color: red; 
  }
</style> 
<!-- HTML片段 --> 
<div v-bind:class="[activeClass]">数组写法</div>
<script type='text/javascript'> 
  // JavaScript片段 
  data: { 
    activeClass: 'active' 
  }
</script>

案例：

html 复制代码 
<head>
  <style>
    .active {
      color: #fff;
      background-color: #f66;
    }
    .ft {
      font-size: 30px
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="active">class的使用</div>
    <!-- class的对象语法 -->
    <div :class="{active: isActive}">class的对象语法</div>
    <!-- class的数组语法 -->
    <div :class="[test, fn1]">class的数组语法</div>
    <!-- 三目运算符 解决问题 -->
    <div :class="isActive ? 'active' : ''">class的对象语法 ---- 三目运算符</div>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isActive: true,
      test: 'active',
      fn1: 'ft'
    }
  })
</script>

1.8.2 style样式处理

  • 对象语法
html 复制代码 
<!-- HTML片段 --> 
<div:style="{color: redColor, fontSize: '20px'}">对象写法</div> 
<script type='text/javascript'> 
  // JavaScript片段 
  data: { 
    redColor: 'red' 
  }
</script>
  • 数组语法
html 复制代码 
<!-- HTML片段 --> 
<div v-bind:style="[color, fontSize]">数组写法</div> 
<script type='text/javascript'>
  // JavaScript片段 
  data: { 
        color: {
      color: 'red' 
    },
    fontSize: { 
      'font-size': '20px' 
    } 
  }
</script>

1.9 v-model

修饰符

.lazy：默认情况下Vue的数据同步采用 input 事件，使用 .lazy 将其修改为失去焦点时触发(change)

.number：自动将用户的输入值转为数值类型（如果能转的话）

.trim：自动过滤用户输入的首尾空白字符

html 复制代码 
<body>
  <div id="app">
    <input type="text" v-model.lazy="username"> {{ username }}
    <input type="text" v-model.number="num"> {{ num }}
    <!-- 在用户未输入 和 输入后 点击按钮测试 -->
    <button @click="getType">获取num的数据类型</button>
    <!-- <input type="text" v-model.trim="note"> -->
    <input type="text" v-model="note">
    <button @click="getVal">获取note的值</button>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      num: '100',
      note: ''
    },
    methods: {
      getType () {
        console.log(typeof this.num)
      },
      getVal () {
        // console.log(this.note)
        console.log(this.note.trim())
      }
    }
  })
</script>

1.10 综合案例： 购物车全选/全不选

  • 分析给 全选 按钮绑定什么样的事件

    • click

    • change

  • 全选 复选框与商品列表前面的复选框不是一回事

    • 两者v-mode的值肯定是不一样的

    • 全选 按钮的v-mode值应该是一个bool值

    • 商品列表前面的复选框v-model值应该是一个数组

参考代码

html 复制代码 
<body>
  <div id="app">
    <input type="checkbox" value="a" v-model="arr">a
    <input type="checkbox" value="b" v-model="arr">b
    <input type="checkbox" value="c" v-model="arr">c
    <input type="checkbox" value="d" v-model="arr">d
    <div>
      {{ arr }}
    </div>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      arr: ['c']
    }
​
  })
</script>
html 复制代码 
<body>
  <div id="app">
    {{ checkarr }}
    <table border="1">
      <tr>
        <th>
          <input type="checkbox" v-model="checked" @change="checkAll">
        </th>
        <th>商品id</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>操作</th>
        <th>小计</th>
      </tr>
      <tr v-for="(item, index) of cartData" :key="item.id">
        <td>
          <input type="checkbox" :value="item.id" v-model="checkarr">
        </td>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button :disabled="item.num<=1" @click="item.num-=1">-</button>
          {{ item.num }}
          <button @click="item.num+=1">+</button>
          <button @click="deleteItem(index)">X</button>
        </td>
        <td>
          {{ item.num * item.price }}
        </td>
      </tr>
    </table>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  const cartData = [
    {id:1,name:'苹果',num:1,price:100}, 
    {id:2,name:'小米',num:1,price:200}, 
    {id:3,name:'华为',num:1,price:300}
  ]
  const app = new Vue({
    el: '#app',
    data: {
      cartData,
      checked: false,
      checkarr: []
    },
    methods: {
      deleteItem (index) {
        confirm('确认删除吗') && this.cartData.splice(index, 1)
      },
      checkAll () {
        if (this.checked) {
          this.cartData.forEach((item, index) => {
            this.checkarr.push(item.id)
          })
        } else {
          this.checkarr = []
        }
      }
    }
  })
</script>
</html>
相关推荐
嵌入式系统工程师6 分钟前
11.25c++继承、多态
开发语言·c++
李小白2020020219 分钟前
Linux 生成/proc/config.gz
linux·服务器·前端
《源码好优多》29 分钟前
基于Java Springboot华为数码商城交易平台
java·开发语言·spring boot
前端小臻30 分钟前
后台管理-动态路由配置以及用户权限管理（vue3+element plus+koa+Sequelize ）
前端·网络·node.js·koa
编码追梦人35 分钟前
Android.mk之变量LOCAL_MODULE_TAGS
android·前端
silvia_frontend37 分钟前
qiankun+vite+vue3从零搭建一个微前端架构系统
前端·微服务
GIS好难学1 小时前
《Vue零基础入门教程》第五课：挂载
前端·javascript·vue.js
康熙38bdc1 小时前
Linux 线程互斥
linux·运维·开发语言
学习前端的小z1 小时前
【前端】JavaScript中的柯里化函数与普通函数嵌套的区别详解
javascript
Mr__vantasy1 小时前
数据结构(初阶7)---七大排序法(堆排序，快速排序，归并排序，希尔排序，冒泡排序，选择排序，插入排序)(详解)
c语言·开发语言·数据结构·算法·排序算法
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04基于微信小程序的自习室预约系统的设计与实现05玄机平台应急响应—webshell查杀06PyTorch机器学习实现液态神经网络07Docker 夺命连环 15 问0804 - matlab m_map地学绘图工具基础函数 - 设置网格09RAG 实践- Ollama+RagFlow 部署本地知识库10【软考经验分享】软考-中级-嵌入式备考