v-if
最后更新于：2022-04-02 01:16:10
## v-if指令
**类型：** any
**用法：** 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 `` ，将提出它的内容作为条件块。
>[info]示例
~~~
~~~
>[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/04v-if1.html
效果如图：
- 这段代码使用了4个表达式：
- 数据的yes属性为true，所以"Yes!"会被输出；
- 数据的no属性为false，所以"No!"不会被输出；
- 运算式age >= 25返回true，所以"Age: 28"会被输出；
- 运算式name.indexOf('jack') >= 0返回false，所以"Name: keepfool"不会被输出。
>[danger]注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。
这一点可以从渲染的HTML源代码看出来，面上只渲染了3个``元素，v-if值为false的`
';
Yes
~~~ >[success]代码示例1 ~~~Hello,Vue js!!
Yes!
No!
Age:{{age}}
Name:{{name}}
`元素，v-if值为false的``元素没有渲染到HTML。
为了再次验证这一点，可以在Chrome控制台更改age属性，使得表达式age >= 25的值为false，可以看到``Age: 28`
`元素被删除了。
age是定义在选项对象的data属性中的，为什么Vue实例可以直接访问它呢？
这是因为每个Vue实例都会代理其选项对象里的data属性。
## `` 中 v-if 条件组
>[success]代码示例2
~~~
Title
Paragraph 1
Paragraph 2
~~~
因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个` `元素当做包装元素，并在上面使用 v-if。最终的渲染结果不会包含 `` 元素。
>[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/04v-if2.html
效果如图：
`Age: 28`
`元素被删除了。  age是定义在选项对象的data属性中的，为什么Vue实例可以直接访问它呢？ 这是因为每个Vue实例都会代理其选项对象里的data属性。 ## `` 中 v-if 条件组 >[success]代码示例2 ~~~Title
Paragraph 1
Paragraph 2