vue笔记-列表渲染

时间:2022-06-12 22:48:04
用v-for把一个数组对应为一组元素
使用方法:v-for="(item,index) in items"//也可以使用of替代in
{
items:源数组
item:数组元素迭代的别名
index:当前项的选项
}
<ul id="example-1">
<li v-for="item in items" :key="index">
{{ item.message }}
</li>
</ul>
一个对象的v-for
使用方法:v-for="(value,key,index) in object"
{
object:源对象
value:属性值
key:属性
index:索引
}
<div v-for="(value, key, index) in object" :key="key">
{{ index }}. {{ key }}: {{ value }}
</div>
数组更新检测
1:数组变异方法(push pop shift unshift splice sort reverse)会改变原数组
2:替换数组,对于一些不改变原数组,但是返回值是新数组的情况,可以用新数组替换原数组的方式
3:利用索引修改数组值,单纯修改数组的length属性都是不能被检测到的 对象更新检测
1:Vue 不能检测对象属性的添加或删除 解决办法
数组:通过实例的set动态添加属性or使用数组的splice方法
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue) 对象:通过实例的set动态添加属性
Vue.set(object, key, value)
//为已有对象添加多个属性,可以将两个对象合并成一个新的对象
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
通过v-for在一段范围取整数
<div>
<span v-for="n in 10">{{ n }} </span>
</div> 1 2 3 4 5 6 7 8 9 10
当v-for 与 v-if处在同一个节点 v-for的优先级将更高
使用场景:当后台返回一个医生列表,而你只想显示可预约时间的医生,你并不需要将返回数据进行单独处理;