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