【Vue】条件渲染与列表渲染

条件渲染

v-if

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-if="awesome">
    Vue!
</h1>
<h1 v-else>//使用v-else来表示v-if的else块
    Oh no!
</h1>

因为v-if是一个指令，因此必须将其添加到一个元素上。

若想切换多个元素，则可以把一个<template>元素当作不可见的包裹元素，并在上面使用v-if，最终渲染结果将不包含<template>元素

v-else-if

<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>

小例子：用key管理可复用的元素

vue会尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。

但可以使用key这个attribute对两个不同元素进行独立。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show

v-show也是一个根据条件展示元素的指令，用法大致一样：

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

需要注意：带有v-show的元素始终会被渲染并保留在DOM中，v-show只是简单地切换元素的CSS property

注意，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-of与v-for

v-for优先级高于v-if，不建议两者一起使用。

如果想实现有条件地跳过循环的执行，可以将v-if置于外层元素上。

<ul v-if="todos.length">
    <li v-for="todo in todos">
    	{{todo}}
    </li>
</ul>
<p v-else>
    NO todos left!
</p>

如果想要只渲染部分符合条件的结点时，可以将两个放入同一元素中。

<li v-for="todo in todos" v-if="!todo.isComplete">
	{{todo}}
</li>

列表渲染

v-for

我们可以使用v-for指令基于一个数组渲染一个列表，格式为：item in items的特殊语法，其中items是原数组，而item是被迭代的数组元素的别名。

<ul id="ex-1">
    <li v-for="item in itmes" :key="item.message">
    	{{item.message}}
    </li>
</ul>
var example1 = new Vue({
  el: '#ex-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在v-for块中，我们可以访问所有父作用域的property；

v-for还支持一个可选的第二个参数，即当前项的索引值。

<ul id="ex-2">
    <li v-for="(item,index) in itmes">
    	{{parentMessage}}-{{index}}-{{item.message}}
    </li>
</ul>
var example2 = new Vue({
  el: '#ex-2',
  data: {
	parentMessage:'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

可以用of替代in作为分隔符，更接近JS迭代器的语法。

在v-for中使用对象

可以使用v-for遍历一个对象的property.

<ul id="v-for-object" class='demo'>
    <li v-for="value in object">
    	{{value}}
    </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

结果为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MCA4CYaM-1630069799894)(C:\Users\cz18\AppData\Roaming\Typora\typora-user-images\image-20210823214922956.png)]

也可以提供第二个参数为property的名称，也就是键名。

还可以用第三个参数作为索引。

注意：为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。

数组更新检测

变更方法：这些数组变更方法会触发视图的更新，包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替换数组：非变更方法包括：filter,concat,slice对于这些方法，vue用替换后的数组取代原有数组。

显示过滤，排序后的结果

想要显示一个数组经过过滤或排序后的版本，可以创建一个计算属性，返回过滤或排序后的数组。

在计算属性不适用的情况下，例如在嵌套的v-for循环中，可以使用一个方法实现：

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>
...
data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在v-for里使用值范围

和py中range差不多，接受整数会把模板重复对应次数。

在<template>上使用v-for

template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上。

可以利用带有c-for的来渲染一段包含多个元素的内容。

<ul>
    <template v-for="item in items">
    	<li>{{message}}</li>
		<li class="divider" role="presentation"></li>
		//这样上面这俩都可以被循环多次了。
    </template>
</ul>