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的优先级将更高

使用场景:当后台返回一个医生列表,而你只想显示可预约时间的医生,你并不需要将返回数据进行单独处理;

相关文章