## 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-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 ``` 将上面的`obj1`对象的数据赋值给li,写法如下: ```html
    ``` 效果如下: ![](http://img.smyhvae.com/20180329_1850.png) ## v-if:设置元素的显示和隐藏 **作用**:根据表达式的值的真假条件,来决定是否渲染元素,如果为false则不渲染(达到隐藏元素的目的),如果为true则渲染。 在切换时,元素和它的数据绑定会被销毁并重建。 举例如下:(点击按钮时,切换和隐藏盒子) ```html Document
    我是盒子
    ``` 效果如下: ![](http://img.smyhvae.com/20180329_1920.gif) ## v-show:设置元素的显示和隐藏 **作用**:根据表达式的真假条件,来切换元素的 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`是在这个元素上添加/移除`style="display:none"`属性,表示节点的显示和隐藏。