条件渲染与列表渲染

发表于 | 分类于 | 阅读次数:

条件渲染

v-if指令

  • ​ 利用v-if指令，可以实现在同一页面，不同的时期，根据需要渲染显示不同的块或模板<template>，实现不同的功能需求，从而提高页面的复用率。不同于Angular的*ngIf，在Vue中还提供了v-else指令，来表示v-if的else块。在2.1.0中还新增了v-else-if指令，顾名思义，充当v-if的else if块，类似一般编程语言中的控制语句（if–else if–else），v-else-if可以链式地使用多次。
1
2
3
4
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'"> B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
  • 值得注意的是类似v-else，v-else-if必须跟在v-if或者v-else-if元素之后。

v-show指令

  • v-show也是一个根据条件展示选项的指令。用法大致一样：

    <h1 v-show="ok">Hello!</h1>

  • 不同的是带有v-show的元素始终会被渲染并保留在DOM中，本质上讲，v-show只是简单的切换元素的css属性display。并且，v-show不支持<template>语法和v-else指令。

v-if与v-show的区别与应用场景

  • v-if是正真的条件渲染，因为v-if是惰性的，如果在初始渲染时条件为假，则什么也不做一直到条件第一次变为真时，才会开始渲染条件块。同时，他会确保在切换过程中条件块内的时间监听器和子组件适当地销毁和重建。
  • v-show则不管初始条件是什么，元素总会被渲染，并且只是简单的基于css进行切换。
  • 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

列表渲染

用v-for渲染一个数组

  • 我们用v-for指令根据一组数组的选项列表进行渲染，该指令需要使用item in items形式的特殊语法，items是源数据数组，并且item是数组元素迭代的别名。在v-for块，我们对父作用域属性有完全的访问权限，v-for还支持一个可选的第二个参数为当前项的索引。（也可以用of代替in，因为他是最接近javascript迭代器的语法）
1
2
3
4
5
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
1
2
3
4
5
6
7
8
9
10
let example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

用v-for渲染一个对象

  • 我们也可以用v-for通过一个对象的属性来迭代，我们可以提供第二个可选参数为键名，第三个可选参数为索引。在遍历对象时，是按Object.keys()的结果遍历的，但是不能保证他的结果在不同的Javascript引擎下是一致的。建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途。
1
2
3
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>
1
2
3
4
5
6
7
8
9
10
let vm = new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

用v-for渲染一段取值范围

1
2
3
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

输出：1 2 3 4 5 6 7 8 9 10

用v-for渲染<template>和组件

  • 类似v-if，我们也可以用带有v-for的<template>渲染多个元素或者直接渲染一个组件。比如：
1
2
3
4
5
6
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>
  • 在自定义组件中，我们可以像任何普通元素一样使用v-for。在2.2.0+的版本中，当在组件中使用v-for时，key是必须的。
1
2
3
4
5
6
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>
  • 不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。