--- title: 03-v-on的事件修饰符 publish: true --- ## 前言 本文主要内容： - v-model - v-for - v-if - v-show ## v-model：双向数据绑定 > 重点：**双向数据绑定，只能用于表单元素，或者用于自定义组件**。 之前的文章里，我们通过v-bind，给``标签绑定了`data`对象里的`name`属性。当`data`里的`name`的值发生改变时，``标签里的内容会自动更新。 可我现在要做的是：我在``标签里修改内容，要求`data`里的`name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。 **区别**： - v-bind：只能实现数据的**单向**绑定，从 M 自动绑定到 V。 - v-model：只有`v-model`才能实现**双向**数据绑定。注意，v-model 后面不需要跟冒号， **注意**：v-model 只能运用在**表单元素**中，或者用于自定义组件。常见的表单元素包括：input(radio, text, address, email....) 、select、checkbox 、textarea。 代码举例如下： ```html Document
``` 此时，便可实现我们刚刚要求的双向数据绑定的效果。 ## v-model举例：实现简易计算器 题目：现在两个输入框，用来做加减乘除，将运算的结果放在第三个输入框。 实现代码如下： ```html Document
``` 注意上方代码中的注释，可以了解下`eval()`的用法。 ## Vue中通过属性绑定为元素设置class 类样式 注意，是**类样式**。 ### 引入 我们先来看下面这段代码： ```html Document

我是千古壹号，qianguyihao

``` 上面的代码中，我们直接通过正常的方式，给`

`标签设置了两个 class 类的样式。代码抽取如下： ```html

我是千古壹号，qianguyihao

``` 上面的效果，我们还可以用Vue来写。这就引入了本段要讲的方式。 ### 方式一：数组 **方式一**：直接传递一个数组。注意：这里的 class 需要使用 v-bind 做数据绑定。 代码如下： ```html Document

我是千古壹号，qianguyihao

我是qianguyihao，千古壹号

``` 代码抽取如下： ```html

我是qianguyihao，千古壹号

``` 上方代码中，注意，数组里写的是字符串；如果不加单引号，就不是字符串了，而是变量。 演示效果如下： ![](http://img.smyhvae.com/20180509_1058.png) ### 写法二：在数组中使用三元表达式 ```html

我是qianguyihao，千古壹号

``` 上方代码的意思是，通过data中布尔值 flag 来判断：如果 flag 为 true，就给 h1 标签添加`my-active`样式；否则，就不设置样式。 注意，三元表达式的格式不要写错了。 ### 写法三：在数组中使用 对象 来代替 三元表达式（提高代码的可读性） 上面的写法二，可读性较差。于是有了写法三。 **写法三**：在数组中使用**对象**来代替**三元表达式**。 代码如下： ```html

我是qianguyihao，千古壹号

``` ### 写法四：直接使用对象 写法四：直接使用对象。代码如下： ```html

我是qianguyihao，千古壹号

``` 上方代码的意思是，给`

`标签使用样式`style1`，不使用样式`style2`。注意： 1、既然class样式名是放在对象中的，这个样式名不能有中划线，比如说，写成`:class="{my-red:true, my-active:false}`，是会报错的。 2、我们也可以对象通过存放在 data 的变量中。也就是说，上方代码可以写成： ```html

我是qianguyihao，千古壹号

``` ## Vue中通过属性绑定为元素设置 style 行内样式 注意，是行内样式（即内联样式）。 ### 写法一 **写法一**：直接在元素上通过 `:style` 的形式，书写样式对象。 例如： ```html

我是千古壹号，qianguyihao

``` ### 写法二 **写法二**：将样式对象，定义到 `data` 中，并直接引用到 `:style` 中。 也就是说，把写法一的代码改进一下。代码如下： ```html

我是千古壹号，qianguyihao

``` ### 写法三 写法二只用到了一组样式。如果想定义**多组**样式，可以用写法三。 **写法三**：在 `:style` 中通过数组，引用多个 `data` 上的样式对象。 代码如下： ```html

我是千古壹号，qianguyihao

``` ## v-for：for循环的四种使用方式 **作用**：根据数组中的元素遍历指定模板内容生成内容。 ### 引入 比如说，如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环，就要挨个赋值： ```html
``` 效果： ![](http://img.smyhvae.com/20180329_1713.png) 为了实现上面的效果，如果我用`v-for`进行赋值，代码就简洁很多了： ```html
``` 接下来，我们详细讲一下`v-for`的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法。 ### 方式一：普通数组的遍历 针对下面这样的数组： ```html ``` 将数组中的**值**赋给li： ```html
  • {{item}}
    • ``` 将数组中的**值和index**赋给li： ```html
  • 值：{{item}} --- 索引：{{index}}
    • ``` 效果如下： ![](http://img.smyhvae.com/20180329_1856.png) ### 方式二：对象数组的遍历 ```html Document
    ``` 效果如下： ![](http://img.smyhvae.com/20180509_1500.png) ### 方式三：对象的遍历 针对下面这样的对象： ```html ``` 将上面的`obj1`对象的数据赋值给li，写法如下： ```html
    ``` 效果如下： ![](http://img.smyhvae.com/20180329_1850.png) ### 方式四：遍历数字 `in`后面还可以直接放数字。举例如下： ```html ``` 效果如下： ![](http://img.smyhvae.com/20180509_1505.png) ### v-for中key的使用注意事项 **注意**：在 Vue 2.2.0+ 版本里，当在**组件中**使用 v-for 时，key 属性是必须要加上的。 这样做是因为：每次 for 循环的时候，通过指定 key 来标示当前循环这一项的**唯一身份**。 > 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**， 而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。 > 为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。 key的类型只能是：string/number，而且要通过 v-bind 来指定。 代码举例： ```html Document

    {{item.id}} --- {{item.name}}

    ``` ## v-if：设置元素的显示和隐藏（添加/删除DOM元素） **作用**：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。 在切换时，元素和它的数据绑定会被销毁并重建。 举例如下：（点击按钮时，切换和隐藏盒子） ```html Document
    我是盒子
    ``` 效果如下： ![](http://img.smyhvae.com/20180329_1920.gif) ## v-show：设置元素的显示和隐藏（在元素上添加/移除`style="display:none"`属性） **作用**：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 `display:none`属性；否则移除`display:none`属性。 举例如下：（点击按钮时，切换和隐藏盒子） 我们直接把上一段代码中的`v-if`改成`v-show`就可以了： ```html Document
    我是盒子
    ``` 效果如下： ![](http://img.smyhvae.com/20180329_2040.gif) ### v-if和v-show的区别 `v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。 区别： - v-if：每次都会重新添加/删除DOM元素 - v-show：每次不会重新进行DOM的添加/删除操作，只是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。 优缺点： - v-if：有较高的切换性能消耗。这个很好理解，毕竟每次都要进行dom的添加／删除操作。 - v-show：**有较高的初始渲染消耗**。也就是说，即使一开始`v-show="false"`，该节点也会被创建，只是隐藏起来了。而`v-if="false"`的节点，根本就不会被创建。 **总结**： - 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show - 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if