Vue 列表渲染
列表渲染
Vue 中可以使用 v-for
指令来渲染一个列表。
<div id="app">
<ul>
<li v-for="person in persons">{{person.name}} {{person.age}}</li>
</ul>
</div>
const vm = new Vue({
el: "#app",
data: {
persons:[
{name:'张三岁',age:18},
{name:'李四年',age:19},
{name:'王五载',age:20}
]
},
});
v-for 索引解析
v-for
不只是能简单的取出列表中的值,稍加修改还可以把索引也带出来。
<div id="app">
<ul>
<li v-for="(person,index) in persons">name = {{person.name}} age= {{person.age}} index = {{index}}</li>
</ul>
</div>
同样 v-for
也可以用于对象,不过解析的次序分别是 value,key,index
这三个维度。
<div id="app">
<ul>
<li v-for="(value,key,index) in persons[0]">{{value}} {{key}} {{index}}</li>
</ul>
</div>
维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。如我们在列表的最前面插入一个元素,就结果来看 Vue 也能正确的处理元素之间的次序。
v-for 里使用范围
<div id="app">
<ul>
<li v-for="number in 5">{{number}}</li>
</ul>
</div>