v-for用于循环遍历数组
基础语法
v-for="(item,index) in list" :key="item.id">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="item.id">
<span>姓名:{{ item.name }}</span>
<span>年龄:{{ item.age }}</span>
</li>
</ul>
</div>
<script>
/* v-for指令使用key值几种情况
1.没有key值: 就地更新
2.key值为下标 : 就地更新 (与不设置key值没有区别)
3.key值为id (唯一字符串): 复用相同的key, 更新不同的key
* 同级父元素中,子元素的key值必须是唯一的,否则vue会报错。(类似于相同作用于变量名不能重复)
总结: v-for指令的key值优先使用唯一字符串(性能最高), 实在没有就用下标index
*/
/* 创建vue实例 */
var app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
list:[
{id:'21378',name:'张三',age:20},
{id:'12456',name:'李四',age:22},
{id:'39862',name:'王五',age:30},
]
}
})
</script>
</body>
</html>
v-for的更新检测
1.数组的方法分为两种 第一种: 会改变原数组的元素值, 例如 reverse()、pop()、push()等 * 这种情况 v-for也会更新 第二种:不会改变原数组的元素值. 例如 slice() 、 filter() 、 concat()等 * 这种情况 v-for不会更新
2.总结 : 如果v-for没有更新. 可以覆盖整个数组, 或 使用 vue.$set() 强制更新