v-if:直接操作的是DOM元素。
v-show操作的是display。
◆v-if指令的作用是:根据表达式的真假切换元素的显示状态
◆本质是通过操纵dom元素来切换显示状态
◆表达式的值为true,元素存在于dom树中,为false,从dom树中移除
◆频繁的切换v-show,反之使用v-if,前者的切换消耗小
结果：
1，原始的没有显示的时候：
2，点击显示出来：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>V-IF指令</title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示！" @click="changeisshow">
<p v-if="isShow"> 测试V-IF！ </p>
<p v-show="isShow"> 测试V-show！ </p>
<p v-if="tem>=35"> 温度高于35！ </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
tem:40
},
methods:{
changeisshow:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>