# 条件和列表渲染

# 条件渲染

# v-if

直接作用于 DOM 结构，在<template>元素上使用 v-if 条件渲染，最终的渲染结果不包含<template>元素

v-else

v-else-if

用key管理可复用的元素

vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其他一些好处，比如允许用户在不同的登录方式之间切换

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

在上面的代码中，切换 loginType 将不会清楚用户已经输入的内容，虽然前后的两个 input 在 DOM 结构中是不一样的。因为两个模板使用了相同的元素，<input>不会被替换掉——仅仅是替换了它的placeholder。

但这样有时并不符合实际需求，所以 Vue 提供一种方式来表达”这两个元素是完全独立的，不要复用它们“。这就是 key，只需要给这两个元素添加一个具有唯一值的 key 属性即可。

<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-if，v-show 只是简单的切换了元素的 css 属性 display，并且 v-show 不支持<template>元素，毕竟 ta 不是真正的 DOM 元素，不具有 css 属性

# v-if 与 v-for 一起使用

不推荐这两一起使用，当 v-if 与 v-for 一起使用时，v-for 具有更高的优先级，注意在 Vue 3.0 中 v-if 会具有更高的优先级。

# 列表渲染

# v-for

用 v-for 把一个数组对应为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in itemList 形式的特殊语法，其中 item 是被迭代的数组元素的别名

<ul id="example-1">
  <li v-for="item in items" :key="item.message">{{ item.message }}</li>
</ul>

var example1 = new Vue({
  el: "#example-1",
  data: {
    items: [{ message: "Foo" }, { message: "Bar" }]
  }
});

也可以使用 of 来替代 in 作文分隔符，其中 item 是数组元素的别名，index 是索引

<div v-for="(item,index) of items"></div>

在 v-for 里使用对象

也可以用 v-for 来遍历一个对象的属性，其中第一个参数是键值得别名，第二个参数是键名的别名

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表是，它默认使用"就地更新"的策略，如果数据线的顺序被改变，Vue 将不会移动 DOM 来匹配，而是就地更新每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份从而重用和重新排序现有元素，需要为每项元素提供一个唯一的key属性，另外请使用字符串或者数值类型的值作为key

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

在使用 v-for 渲染列表的时候，尽可能提供一个绑定数据线的唯一的 key 值，比如索引，键名等，也可以组合来达到唯一的效果

# 维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

# 数组更新检测

变更方法

Vue 把被侦听的数组的变化方法进行了重新包装，所以他们亦将会触发视图的更新，这些方法包括

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

替换数组

变更方法，顾名思义，会变更调用了这些方法的数组，但也有非变更方法，他们不会变更原始数组，而总是返回一个新数组，此时我们可以用一个新数组来替代换旧数组，保持统一。

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/);
});

在 Vue 中用一个含有相同元素的数组去替换原来的数组是非常高效的操作

注意事项

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化，这时我们可以使用 watch 中的深度监听

# 显示过滤/排序后的结果

有时我们想要显示一个数组经过过滤活排序后的版本，而不去实际变更或重置原有的数据，在这种情况下可以创建一个计算属性，来返回过滤或排序后的数组，然后渲染这个计算属性即可

# 在 v-for 里使用值范围

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

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

# 在`<template>`使用 v-for

类似 v-if，利用<template>来包括需要循环渲染的元素

# 在组件上使用 v-for

和普通元素一样使用，记得要加 key，又因为组件有自己独立的作用域，为了把迭代数据传递到组件里，我们要使用 prop

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

← 数据和模板渲染事件和表单 →