Vue基础之v-if与v-show

转载

mob604757044d68 2021-09-08 16:05:00

文章标签 v-show v-if vue css html 文章分类 Java 后端开发

Show Time!

说再多不如直接上效果：

（一）v-if

Vue基础之v-if与v-show_css

　　<div id="app">
　　　　<div v-if="flag" class="box one">吃晚饭</div>
　　　　<div v-else class="box two">不吃晚饭</div>
　　　　<button @click="flag=!flag">切换条件</button>
　　</div>

　　<script src="js/vue.js"></script>
　　<script>
　　　　const app = Vue.createApp({
　　　　　　data() {
　　　　　　　　return {
　　　　　　　　　　flag: true
　　　　　　　　}
　　　　　　},
　　　　}).mount("#app")
　　</script>

由上图可以得出，v-if是在DOM层面控制元素的显示隐藏，当条件不成立时，元素就不存在，当条件成立时元素才会出现。

v-if是真正的条件渲染，因为会确保切换过程中条件块内的事件监听器和子组件适当的被销毁和重建，在DOM层面销毁和创建

（二）v-show

Vue基础之v-if与v-show_v-if_02

v-show是通过css控制显示与隐藏，当条件不成立时，元素上面会加入一个style="display:none;"来隐藏元素；不管初始条件是什么，元素总会被渲染，并且只是简单地基于CSS进行切换，在CSS层面控制。

　　<div id="app">
　　　　<div class="box one" v-show="flag">大大怪将军</div>
　　　　<div class="box two" v-show="!flag">小小怪下士</div>
　　</div>

　　<script src="js/vue.js"></script>
　　<script>
　　　　const app = Vue.createApp({
　　　　　　data() {
　　　　　　　　return {
　　　　　　　　　　flag: true
　　　　　　　　}
　　　　　　},
　　　　}).mount("#app")
　　</script>