目录
- 一、Vue中的v-if指令是什么？
- 二、v-if指令的使用
一、Vue中的v-if指令是什么？
v-if指令是根据表达值的真假，切换元素的显示和隐藏， 本质是通过操纵dom元素来切换显示状态。
注意： 表达式的值为true，元素存在于dom树中；为false，元素从dom树中移除。
注意： 频繁切换场景下使用v-show，反之使用v-if，因为前者的切换消耗相对小。
二、v-if指令的使用
1、v-on指令绑定的方法定义在methods属性中。
2、v-on指令绑定的方法内部通过this关键字可以访问定义在data中数据。
案例代码执行如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-if指令</title>
</head>
<body><div id="app"><input type="button" value="切换显示" @click="toggleIsShow"><p v-if="isShow">v-if指令根据表达值的真假,切换元素的显示和隐藏（操纵dom元素）</p><p v-show="isShow">v-show指令是根据表达值的真假，切换元素的显示和隐藏（display属性）</p><h2 v-if="temperature>=35">热死啦</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{isShow:false,temperature:20},methods: {toggleIsShow:function(){this.isShow = !this.isShow;}},})</script>
</body></html>
程序执行效果如下：
点击按钮前
点击按钮后
