v-for循环
在vue中，可以通过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>
</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>
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>
浙公网安备 33010602011771号