1.列表渲染指令v-for
在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。
<!-- v-for不仅可以遍历数组，还可以遍历对象，这里大家记住v-for里面的一个东西 :key, 就是v-bind:key，这个key是干什么的呢，就是为了给现在已经渲染好的li标签做个标记，以后即便是有数据更新了，也可以在这个li标签里面进行数据的更新，不需要再让Vue做重新生成li标签的dom操作，提高页面渲染的性能，因为我们知道频繁的添加删除dom操作对性能是有影响的，我现在将数据中的id绑定到这里，如果数据里面有id，一般都用id，如果没有id，就绑定v-for里面那个index(当然你看你给这个索引取的变量名是什么，我这里给索引取的名字是index)，这里面它用的是diff算法 -->
<!-- <li v-for="(item,index) in data.users" :key="item.id" @click> 还可以绑定事件 -->
<li v-for="(item,index) in book_list" :key="item.id"> 第{{index+1}}本图书：{{book.title}}</li>
<!-- v-for的优先级最高，先把v-for遍历完，然后给:key加数据，还有，如果没有bind这个key，有可能你的页面都后期用动态数据渲染的时候，会出现问题，所以以后大家记着，一定写上v-bind:key -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bb{ background-color: tan; } </style> <script src="vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(value,index) in hobby_list" :key="index">{{value}}--{{index}}</li> <!-- value是数组中的元素,index是索引,注意v-for一定要写 :key --> <!-- <li v-for="value, index in hobby_list">{{value}}</li>--> </ul> <ul> <li v-for="(value,index) in person_info" :key="index">{{value}} -- {{index}}</li> </ul> <table border="1"> <thead> <tr> <th>商品名称</th> <th>价格</th> </tr> </thead> <tbody> <tr v-for="(value,index) in goods" :key="index" :class="{bb:value.price>60}"> <td>{{value.name}}</td> <td>{{value.price}}</td> </tr> </tbody> </table> </div> </body> <script> // 思路： // 当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list] // 代码实现： var card = new Vue({ el:"#app", data:{ num:0, hobby_list:[ ‘抽烟‘, ‘喝酒‘, ‘烫头‘, ‘烫头2‘, ], person_info:{ name:‘永飞‘, age:99, sex:‘unknown‘, }, goods:[ {"name":"python入门","price":150}, {"name":"python进阶","price":100}, {"name":"python高级","price":75}, {"name":"python研究","price":60}, {"name":"python放弃","price":110}, ] }, methods:{ } }); </script> </html>
原文：https://www.cnblogs.com/xo1990/p/14646596.html