vue笔记-列表渲染

用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的优先级将更高
使用场景:当后台返回一个医生列表,而你只想显示可预约时间的医生,你并不需要将返回数据进行单独处理;