vue2之v-if 指令之显示和隐藏元素，通过添加或移除dom元素方式
发布：智码IT网 阅读：
<!--
v-if 指令：显示和隐藏元素
1、通过操作dom元素来显示和隐藏元素
2、指令的值最终会是true或false，true则显示（添加元素），false则不显示（移除元素）
-->
<div id="app">
<h1 v-if="showH1">test</h1>
<input type="button" value="显示/隐藏H1" v-on:click="showHideH1" />
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.common.dev.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
showH1: true,
},
methods: {
showHideH1: function () {
this.showH1 = !this.showH1;
},
},
});
</script>
效果：显示的时候，真实存在h1元素
点击按钮后，h1元素隐藏了，实际上是被移除了，如图所示：
上一篇：没有了
下一篇：没有了