作者：刘伟亮 | 来源：互联网 | 2023-10-11 16:58
版权声明&＃xff1a;本文为 小异常 原创文章&＃xff0c;非商用自由转载-保持署名-注明出处&＃xff0c;谢谢&＃xff01;
文章目录 一、v-show指令&＃xff08;元素是否显示&＃xff0c;底层使用display实现&＃xff09; 二、v-if指令&＃xff08;元素是否显示&＃xff0c;底层使用DOM实现&＃xff09; 三、v-show指令和v-if指令的区别
上篇博客给大家介绍了两个非常简单的 Vue 指令&＃xff08;《v-text和v-html&＃xff08;常用指令一&＃xff09;》&＃xff09;&＃xff0c;带大家跨入了 “Vue 指令大门” 。本篇将继续带大家深入探索 Vue 的常用指令&＃xff0c;本篇将会给大家介绍 v-show 和 v-if 这两个指令&＃xff0c;这两个指令非常相似&＃xff0c;实现的效果也基本一样&＃xff0c;很多小伙伴会搞混它们&＃xff0c;我也会在文章的最后讲解 v-show 和 v-if 指令的区别。
一、v-show指令&＃xff08;元素是否显示&＃xff0c;底层使用display实现&＃xff09; v-show 指令 用来控制页面中某个元素是否显示&＃xff0c;底层使用的是标签的 display 属性 。
< body> < divid &＃61; " app" > < h1v-show &＃61; " false" > h1 > < h1v-show &＃61; " show" > h1 > div > < scriptsrc &＃61; " https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > script > < script> const vm &＃61; new Vue ( { el: &＃39;#app&＃39; , data: { show: true } } ) ; script > body >
在 v-show 中可以通过 Vue 数据来控制标签的展示或隐藏&＃xff08;v-show&＃61;"false"&＃xff09;&＃xff1b; 也可以直接书写 boolean 值达到控制元素显示或隐藏的功能&＃xff08;v-show&＃61;"show"&＃xff09;。 二、v-if指令&＃xff08;元素是否显示&＃xff0c;底层使用DOM实现&＃xff09; v-if 指令 也是用来控制页面元素是否显示&＃xff0c;不同的是底层使用 DOM 元素 来实现。不显示时相当于把 DOM 元素移除了&＃xff0c;用注释代替了。 注意&＃xff1a; v-if 指令 不能通过书写 boolean 值达到控制元素显示隐藏的功能哦~
< body> < divid &＃61; " app" > < h1v-if &＃61; " false" > h1 > < h1v-if &＃61; " true" > h1 > div > < scriptsrc &＃61; " https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > script > < script> const vm &＃61; new Vue ( { el: &＃39;#app&＃39; , data: { } } ) ; script > body >
三、v-show指令和v-if指令的区别 v-show 指令 和 v-if 指令 我们在使用的时候发现它俩的效果是一样的&＃xff0c;其实这只是你看到的效果一样&＃xff0c;它实现的原理可是不一样的哦~ 我大致总结了这几点&＃xff0c;小伙伴们还可以在留言区进行补充呢。
v-show 指令 底层使用的是标签的 display 属性 实现&＃xff0c;v-if 指令 底层使用 DOM 元素 来实现&＃xff1b;
v-show 指令 可以通过 书写 boolean 值达到控制元素显示或隐藏的功能&＃xff0c;v-if 指令 不能通过 书写 boolean 值达到控制元素显示或隐藏的功能。
博客中若有不恰当的地方&＃xff0c;请您一定要告诉我。前路崎岖&＃xff0c;望我们可以互相帮助&＃xff0c;并肩前行&＃xff01;
京公网安备 11010802041100号