上一节我们学了5个重要的指令： v-text 、 v-html 、 v-show 、 v-if 、 v-else
这一节，我们继续学习剩下的5个指令。话不多说，撸起来！
6. v-for 指令
有时候，我们的data中的存放的数据不是个简单的数字或者字符串，而是数组Array类型，这个时候，我们要把数组的元素展示在视图上，就需要用到vue提供的 v-for 指令，来实现列表的渲染。
我们看看它的用法：
首先，我们的data中包含数组list，数组包含三个元素：“Tom”，“John”，“Lisa”，我们通过 v-for 指令把它渲染出来，其中item表示数组中的每个元素。我们看看渲染结果：
(效果图)
我们看到，我们解析渲染出三个div，其中包含的值分别是数组中的元素，表示我们解析渲染成功。
什么，怎么拿到索引？拿到每个元素的索引也很简单，我们稍微改动一下代码，把html部分的代码修改为：
在循环解析的过程中，我们不但要拿到list数组的每个元素item，我们还获取每个元素的索引，写法如上，循环的时候加上(index,item)。
我们来看效果图：
（效果图）
我们看到，索引分别是0,1,2都被成功地渲染出来了。这就是用 v-for 指令来渲染列表的用法。比起以前手动更新dom列表，简直就是方便得不要不要的。
提醒：v-for指令除了可以迭代数组，还可以迭代对象和整数。
7. v-bind 指令
在第六节我们也提过 v-bind 指令的作用和用法，它用于动态绑定DOM元素的属性，比较常见的比如：<a>标签的href属性，<img/>标签的src属性。
用 v-bind 指令来修饰href属性，表明它的值是一个动态的值，对应的则是data中的link的值：http://hello.com.
来吧，看看渲染效果：
（效果图）
<a>标签的href的值成功地解析渲染成:http://hello.com。
第六节也说过， v-bind 指令可以简写成一个冒号“：”，也就是以下两种写法是等价的。
它们的解析渲染效果是一样一样的。
8. v-on 指令
v-on 指令相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数，记性好的同学应该记得我们在第四节介绍methods选项的时候，有用到 v-on 指令。（估计你也不记得了）,这里我们还是配合methods来演示：
methods选项的用法不再展开讲解，还不理解的同学可以翻看第四节《定义一个vue实例常用的4个选项》
回到这个例子，我们通过 v-on 指令修饰click点击事件，指定事件响应后的处理函数为methods中的say( )方法，我们渲染看看效果：
(gif图，加载需要点时间)
点击按钮，可以成功触发click事件，并且调用say( )，一切都在我们的预期之中。
此外，如果你想给处理程序say( )传参数，也是可以的，用法跟普通的方法一致。
我们再上一个案例的基础上稍微修改代码，say(name)接受一个参数name，并把name打印出来，在调用的时候传如实参“Tom”。再看看效果，是不是在我们的预期之内：
(gif图，加载需要点时间)
“hello，Tom”被打印出来了，一切尽在掌握之中，感觉真好。
9. v-model 指令
这是一个最重要最常用的指令，一般用在表单输入，它帮助我们轻易地实现表单控件和数据的双向绑定，相对以前的手动更新DOM，简直就是开发者的福音，迫不及待地来看看它的用法：
只要给input控件添加 v-model 指令，并指定关联的数据msg，我们就可以轻松把把用户输入的内容绑定在msg上。我们把msg的内容显示出来，看是不是跟用户输入的内容是同步更新的：
(gif图，加载需要点时间)
是不是比你手动更新DOM爽多了，是不是感受到了vue的MVVM带来的快感？
10. v-once 指令
最后，我们再来讲解一下v-once指令，它的特点是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。
我们再上面的案例代码中稍做修改，仔细看改了哪里：
修改1:<p>标签增加了 v-once 指令；
修改2：msg的初始值不再是空字符串。我们来看看效果：
(gif图，加载需要点时间)
由于msg有了初始值，第一次渲染的时候，input控件和<p>标签都有了内容，由于<p>标签我们添加了 v-once 指令，所以，后期我们更新msg的值的时候，<p>标签的内容不会发生改变，也是符合我们的预期。
本节小结
学完本节，你应该掌握了 v-for 、 v-bind 、 v-on 、 v-model 、 v-once 这5个指令的用法，加上第七节的5个指令，可以满足你在开发中的需求了。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
