vue2之v-show指令：显示隐藏元素，通过设置css的display属性
发布：智码IT网 阅读：
<!--
v-show 指令：显示和隐藏元素
1、通过修改css的display来显示和隐藏元素
2、指令的值最终会是true或false，true则显示，false则不显示
-->
<div id="app">
<h1 v-show="showH1">test</h1>
<div>
<input type="button" value="显示/隐藏h1" @click="showHideH1">
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.common.dev.min.js"></script>
<script>
console.log('dd');
var app = new Vue({
el: "#app",
data:{
showH1:true,
},
methods: {
showHideH1:function(){
this.showH1 = !this.showH1;
}
},
});
</script>
效果：指令值为true时的h1元素
点击按钮后的h1元素被隐藏，且增加了：style="display: none;"样式代码
上一篇：没有了
下一篇：没有了