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>
本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽，造成漏登，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。
