逻辑渲染

<template> 上的 v-if

如果要使用v-if切换多个元素,就可以用 <template> 包裹:

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>


注意事项

v-show 不支持在 <template> 元素上使用

不推荐同时使用 v-if 和 v-for,因为二者的优先级不明显;

当 v-if 和 v-for 同时存在于一个元素上时,v-if 的优先级高,这意味着 v-if 会首先被执行,且无法访问到 v-for 作用域内的变量:


v-for

通过参数二获取索引

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

直接解构对象元素

<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

可使用 of 替代 in,作用相同:

<div v-for="item of items"></div>

遍历对象属性,参数二为属性名,参数三为索引:

<li v-for="(value, key,index) in myObject">
  {{ key }}: {{ value }}
</li>

在模板上使用v-for:

<template v-for="item in items">
  <li>{{ item.msg }}</li>
  <li class="divider" role="presentation"></li>
</template>


v-for的key

为每个元素提供一个节点标识key,从而使Vue能够重用和重新排序现有的元素;


数组变化侦测

Vue 能够侦听方法包括:push()、pop()、shift()、unshift()、splice()、sort()、reverse(),因为这些方法是修改原数组;

也有一些无法侦听的方法,如:filter()、concat()、slice(),因为这些方法不会更改原数组,而是返回新数组。


注意事项

如果欲遍历的数据来自计算属性,则千万不要在计算属性中修改原数组,否则会导致计算属性被循环计算:

computed: {
  evenNumbers() {
    return this.numbers.filter(n => n % 2 === 0)
  }
}

// 模板
<li v-for="n in evenNumbers">{{ n }}</li>


举报

© 著作权归作者所有


1