v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

<template>  <div >    <h1 v-if="obj.status">您好！我们又见面了！</h1>    <button @click="ok">确定</button>  </div></template><script>  import { ref } from 'vue'  export default {    setup () {      const obj = ref({status:false});      const ok = () => {        obj.value.status = !obj.value.status;      }      return {        obj,        ok      }    }  }</script>

你也可以使用 v-else 为 v-if 添加一个“else 区块”。

<template>  <div >    <h1 v-if="obj.count==1">您好！我们第{{obj.count}}次见面！</h1>    <h1 v-else>我们第{{obj.count}}次见面！</h1>    <button @click="ok">确定</button>  </div></template><script>  import { ref } from 'vue'  export default {    setup () {      const obj = ref({count:1});      const ok = () => {        obj.value.count ++;      }      return {        obj,        ok      }    }  }</script>

一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

v-else-if

顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：

<template>  <div >    <h1 v-if="obj.count==1">您好！我们第{{obj.count}}次见面！</h1>    <h1 v-else-if="obj.count==2">我们第{{obj.count}}次见面！</h1>    <h1 v-else>不想见!</h1>    <button @click="ok">确定</button>  </div></template><script>  import { ref } from 'vue'  export default {    setup () {      const obj = ref({count:1});      const ok = () => {        obj.value.count ++;      }      return {        obj,        ok      }    }  }</script>

和 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 仅切换了该元素上名为 display 的 CSS 属性。

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

v-if 与 v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

v-if和v-for

警告: 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。

v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

<template>  <div >    <li v-for="item in obj.items">      <span>{{ item.name }}</span> <span>{{ item.sex }}</span>    </li>     <button @click="add">确定</button>  </div></template><script>  import { ref } from 'vue'  export default {    setup () {      const obj = ref({items:[{name:"张三",sex:"男" }] });      const add = () => {        obj.value.items.push({name:"王后",sex:"女" });      }      return {        obj,        add      }    }  }</script>

v-for 变量的作用域和下面的 JavaScript 代码很类似：

const parentMessage = 'Parent'const items = [  /* ... */]items.forEach((item, index) => {  // 可以访问外层的 `parentMessage`  // 而 `item` 和 `index` 只在这个作用域可用  console.log(parentMessage, item.message, index)})

注意 v-for 是如何对应 forEach 回调的函数签名的。实际上，你也可以在定义 v-for 的变量别名时使用结构，和解构函数参数类似：

<li v-for="{ message } in items">  {{ message }}</li><!-- 有 index 索引时 --><li v-for="({ message }, index) in items">  {{ message }} {{ index }}</li>

多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：

<template>  <div >    <li v-for="item in obj.items">      <h2>{{ item.name }} </h2>       <ul v-for="item2 in item.children">        <h5>{{ item2.name }} </h5>      </ul>     </li>   </div></template><script>  import { ref } from 'vue'  export default {    setup () {      const obj = ref({items:[      {id:1,parent_id:0,name:"控制台",children:[] },      {id:2,parent_id:0,name:"系统管理",children:[        {id:3,parent_id:2,name:"用户管理",children:[] },        {id:4,parent_id:2,name:"角色管理",children:[] }      ] }       ] });          return {        obj       }    }  }</script>

你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：

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

你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

可以通过提供第二个参数表示属性名 (例如 key)：

第三个参数表示位置索引：

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

在演练场中尝试一下

在v-for里使用范围值

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

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

注意此处 n 的初值是从 1 开始而非 0。