Vue.js中v-for列表渲染指令的使用(代码示例)
程序员文章站
2022-03-21 18:58:02
...
本篇文章将给大家介绍如何循环数组并在
vuejs
渲染项目列表,希望对需要的朋友有所帮助!
v-for
指令
Vuejs
为我们提供了一个v-for
指令,用于将项目列表渲染到dom
中。
v-for
指令的语法
v-for="user in users" <!-- user variable is iterator --> <!--users is data array-->
示例
<template> <ul> <!-- list rendering starts --> <li v-for="user in users">{{user.name}}</li> </ul> </template> <script> export default{ data:function(){ return{ users:[ {id:1,name:"king"}, {id:2,name:"gowtham"}, {id:3,name:"ooops"}, ] } } } </script>
在上面的代码中,我们使用v-for
指令循环遍历users
数组,这样在每次循环中user
变量都指向数组中出现的不同对象。
key
属性
当使用v-for
指令时,我们需要向该元素添加一个key
属性,因为vuejs
需要根据提供的key
跟踪列表项。
注意:密钥应该是唯一的
让我们将key属性添加到模板中。
<template> <ul> <li v-for="user in users" :key="user.id"> {{user.name}} </li> </ul> </template> <script> export default{ data:function(){ return{ users:[ {id:1,name:"king"}, {id:2,name:"gowtham"}, {id:3,name:"ooops"}, ] } } } </script>
在users
数组中,id属性对每个对象都是唯一的,因此我们将它传递给key
属性。
我们还可以访问数组中每个项的索引。
<template> <ul> <li v-for="(user,index) in users" :key="user.id"> {{user.name}} {{index}} </li> </ul> </template>
遍历对象
我们还可以通过使用v-for
指令循环JavaScript
对象。
<template> <ul> <!-- accessing `value and key` present in person object --> <li v-for="(value, key) in person" :key="key"> {{key}} : {{ value }} </li> </ul> </template> <script> export default { data: function() { return { person: { firstName: "Rim", lastName: "Doe", age: 20, eyeColor: "blue" } }; } }; </script>
注意:在对象中,我们需要先提取value
,然后是key
。
本篇文章就是关于Vue.js中v-for列表渲染指令的使用介绍,希望对需要的朋友有所帮助!
以上就是Vue.js中v-for列表渲染指令的使用(代码示例)的详细内容,更多请关注其它相关文章!