列表渲染
v-for列表渲染
可以使用一个v-for指令基于一个数组来渲染一个列表，v-for指令的值需要使用item in items形式的特殊语法，其中items是源数据的数组，而item是迭代项的别名，item是可以改名的，和{{ }}内的名称保持一致就行，结合div或其他标签使用，可以获取列表内的多个属性值
v-for也支持使用可选的第二个参数表示当前项的位置索引（数组下标）
也可以使用 of作为分隔符来替代in，这更接近javascript的迭代器语法
<template>
<h3>列表渲染</h3>
<p v-for="(name,index) in names">{{ name }}-{{ index }}</p> <!--列表中单个属性， 并且可以获取当前值的下标-->
<div v-for="res in result"> <!--列表中多个属性-->
<p :id="res.id">{{ res.title }}</p>
<img :src="res.image">
</div>
</template>
<script>
export default {
data() {
return {
names: ["测试1", "测试2", "测试3"],
result: [
{
"id":123123,
"title": "第一個ID",
"image": "C:\Users\Administrator\Desktop\头像.jpg",
},
{
"id":123,
"title": "第二個ID",
"image": "C:\Users\Administrator\Desktop\头像.jpg",
},
]
}
}
}
</script>
- v-for与对象
也可以是用v-for来遍历一个对象的所有属性
<template>
<h3>列表渲染</h3>
<div>
<p v-for="(value, key, index) of userInfo">{{ value }}-{{ key }}-{{ index }}</p>
<p v-for="value of userInfo">{{ value }}</p>
<!--value：对象值，key：对象key，index：对象下标，单独使用时返回的是value-->
</div>
</template>
<script>
export default {
data() {
return {
userInfo:{
name:"iwen",
age:20,
sex:"男"
}
}
}
}
</script>
- 通过key管理状态
vue默认按照“就地更新”的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时，vue不会随之移动DOM元素的顺序。而是就地更新每个元素，确保他们在原本指定的索引位置上渲染
为了给vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，则需要为每个元素对应的块，提供一个唯一的keyattribute
<template>
<h3>key属性添加到v-for中</h3>
<p v-for="(value,index) of names" :key="index">{{ value }}</p>
</template>
<script>
export default{
data(){
return{
names:["测试2","测试1","测试3"]
}
}
}
</script>
温馨提醒：
key在这里是通过
v-bind绑定的特殊Attribute推荐在任何可行的时候为
v-for提供一个keyattribute
key绑定的期望值是一个基础类型的值，例如字符串或number类型
- key的来源
请不要使用index来作为key使用，我们要确保每一条数据的唯一索引不会发生变化，因此一般使用接口返回的数据库id。