阅读更多系列文章请访问我的GitHub博客,示例代码请访问这里。
v-for循环数组、对象
代码参考:/lesson04/01. v-for指令.html
使用v-for="(item, index) in items"就可以将数组或对象中的数据循环输出。
JavaScript:
let vm = new Vue({
el: '#app', // 根元素或挂载点。
data: {
users: [
{ name: 'lee', password: '123456' },
{ name: 'zhangsan', password: '654321' },
{ name: 'lisi', password: '111111' },
],
usersObj: {
lee: '123456',
zhangsan: '654321',
lisi: '111111'
}
}
})
HTML:
<div id="app">
<ul>
<li v-for="(item, index) in users" :key="index">
{{index}}.
用户名:{{item.name}}
密码:{{item.password}}
</li>
</ul>
<ol>
<li v-for="(value, key) in usersObj" :key="index">
用户名:{{key}}
密码:{{value}}
</li>
</ol>
</div>
v-for指令循环字符串、数字
代码参考:/lesson04/02. v-for指令循环字符串、数字.html
v-for指令除了常规循环数组、对象外,还可以循环字符串和数字,需要注意的是,循环数字时默认从1开始。
JavaScript:
let vm = new Vue({
el: '#app', // 根元素或挂载点。
data: {
str: 'Vuejs Tutorial'
}
})
HTML:
<div id="app">
<ul>
<li v-for="(item, index) in str" :key="index">
{{item}}
</li>
</ul>
<ul>
<li v-for="index in 10" :key="index">
{{index}}
</li>
</ul>
</div>
Key属性
在v-for循环中,为循环的标签添加key属性是必须的。
添加key属性的原因要从虚拟DOM说起。通俗地说,虚拟DOM就是一个JSON,假设我们有一段这样的HTML:
<ul>
<li>
<span></span>
<strong></strong>
</li>
<li>
<span></span>
<strong></strong>
</li>
</ul>
Vue在执行时,会将这个结构解析成类似于这样的形式:
{
tag: 'ul',
children: [
{
tag: 'li',
children: [
{
tag: 'span',
tag: 'strong'
}
]
},
{
tag: 'li',
children: [
{
tag: 'span',
tag: 'strong'
}
]
}
]
}
在数据更新时,Vue会先在虚拟DOM中判断将要修改的内容,也可以在积累一定更新之后,再一次性渲染到页面中,这样可以减少页面渲染的次数,增加性能。
假设我们有一个数组的数据,在我们进行增删改查操作时,我们不希望进行每次操作的时候,将整个列表全部重新渲染,而Vue很难判断我们操作的是哪个item。
例如我们将items[1]替换成其他值,Vue很难判断它是否被替换。当然Vue内部会生成一个key值,但这个值与我们传入的数据无关,因此需要我们提供一个id进行判断。
同时为了保证数据的唯一性,key必须是唯一的,且不可改变。