VUE初学--列表渲染v-for
发布时间
阅读量：
阅读量
该指令用于生成和显示列表结构。该指令根据数组元素构建并展示列表内容。实现该功能的方法包括将 item 设置为 itemList 中的每一个元素值（使用 v-for = "item in itemList"）或直接引用 item （使用 v-for = "item of itemList"）。值得注意的是，在某些情况下可以选择用 of 替代 in 来作为分隔符
<div id="#app">
<ul>
<li v-for="item in itemList">
{{ item.name }} --- {{ item.authorName }}
</li>
// <li v-for="item of itemList">
// {{ item.lname }}
// </li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
itemList:[
{name:'成都', authorName: '赵雷'},
{name:'冰城姑娘', authorName: '刘鹏鹏'},
{name:'春风十里', authorName: '鹿先森乐队'},
{name:'我曾', authorName: '隔壁老樊'}
]
}
})
</script>在 v-for 块中，v-for 还支持一个可选的第二个参数，即当前项的索引
<li v-for="(item,index) in itemList">
{{ index }} --- {{ item.name }} --- {{ item.authorName }}
</li>页面输出结果
使用 v-for 遍历对象
<div v-for="value in itemObject">
{{ value }}
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
itemObject:{
name:'成都'，
autorName:'赵雷'，
class:'民谣'
}
}
})
</script>v-for 遍历对象支持多个参数 键名，索引
<div v-for="(value,kname,index) in itemObject">
{{ index }}--{{ kname }}--{{ value }}
</div>v-for 迭代整数
<div v-for="num in number">
这是第{{ num }} 迭代
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
number:5
}
})
</script>v-for 直接迭代数组
<div v-for="num in [0,1,2,3,4]">
{{ num }}
</div>v-for 的维护状态
Vue 正在更新使用 v-for 渲染的元素列表时，默认使用“就地更新”的策略，如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：
注：不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
<div id="app">
<div>
<p>name：<input type="text" v-model="name"></p>
<p>authorName：<input type="text" v-model="authorName"></p>
<input type="button" value="add" @click="f1">
</div>
<ul>
// 这个是添加了 key 的情况
<li v-for="(item,index) in itemList" v-bind:key="item.name">
<label for=""><input type="checkbox"></label>{{ index }} --- {{ item.name }} --- {{ item.authorName }}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'',
authorName:'',
itemList:[
{name:'成都', authorName: '赵雷'},
{name:'冰城姑娘', authorName: '刘鹏鹏'},
{name:'春风十里', authorName: '鹿先森乐队'},
{name:'我曾', authorName: '隔壁老樊'}
]
},
methods:{
f1:function(){
this.itemList.unshift({name:this.name,authorName:this.authorName})
}
}
})
</script>
// 在代码中添加了 v-bind:key 的和未添加的，执行方法后可以看到两种不同的情况，具体我就不贴图了，感兴趣的伙伴，可以把代码弄过去，执行一下注：2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。
全部评论 (0)
还没有任何评论哟~