在纯前端的页面中,我们可以设置一个标签的隐藏与否,而v-show则是vue中来实现该功能的
<body> <div id="app"> <h1 v-show="isSHow">this is a test lebel</h1> <button @click="hide">点击隐藏或展开</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { isShow: true }, methods: { hide: function() { this.isShow = !this.isShow } } }) </script> </body>
我们设置了一个h1标签,初始我们设置v-show是true,表示要展示,然后当我们点击按钮,isShow变成false,就会隐藏,再次点击就又成了true来实现隐藏
同时v-show还支持表达式写法如下
其实v-if和v-show呢大同小异,用法都是用来控制显示与否
发现都可以显示出来
唯一的区别就是当我们隐藏的时候,v-show是改变css样式,变成不展示,而v-if则是直接从代码里边删掉
可以看出,if的消耗更大
