列表渲染
用v-for把一个数组对于为一组元素
我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='vue.js'></script>
<title></title>
</head>
<body>
<div id='app'>
<ul>
<li v-for='item in items'>
<!-- 用v-for的语句对items数组进行渲染，items数组的声明如下 -->
{{item.message}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
items:[
//每一个item元素都是一个对象，每个对象都有message这个属性
{message:'test1'},
{message:'test2'}
]
}
})
</script>
</body>
</html>
在v-for里使用对象
可以用v-for来遍历一个对象的属性。
<body>
<div id='app'>
<ul >
<li v-for="value in object">
{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data: {
object:{
title:'How to lists in vue',
author:'little potato',
publishedAt: '2020-03-08'
}
},
})
</script>
</body>
其每次迭代都会得到属性对应的值，网页输出结果如下：
我们可以在源代码的基础上进行改进，同时显示出数组的index和对象的key属性值：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="vue.js"></script>
</head>
<body>
<div id='app'>
<ul>
<li v-for = "item,index in items">
<!-- 在原有的基础上可以添加索引 -->
{{index}} {{item.message}}
</li>
</ul>
<ul>
<li v-for="value, key in object">
<!-- 加入key可以获取对象的属性 -->
{{key}}: {{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data: {
items:[
{message:'臭仔'},
{message:'宝仔'}
],
object:{
title:'How to lists in vue',
author:'little potato',
publishedAt: '2020-03-08'
}
},
})
</script>
</body>
</html>
可得到如下的结果：
维护状态（此部分还有待理解）
当vue正在更新使用v-for渲染元素列表时，它默认使用的是“就地更新”的策略。如果数据的顺序被改变，vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并确保他们在每个位置正确渲染。
这个默认模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态（例如：表单输入值）的列表输出。
为了给Vue一个提示，以便她能够跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每个元素提供唯一的key属性：
<ul>
<li v-for = "item,index in items" :key="index">
<!-- ：key是v-bind：key的缩写模式，数组对象中index是唯一个id属性 -->
{{index}} {{item.message}}
</li>
</ul>
<ul>
<li v-for="value, key in object" :key='key'>
<!-- 对象中key时其唯一值 -->
<!-- 加入key可以获取对象的属性 -->
{{key}}: {{value}}
</li>
</ul>
