Vue中v-if和v-show的比较

v-if和v-show都可以控制元素是否在页面上显示，下面两个例子说明v-if和v-show的用法。

示例代码：v-if

 <!-- 下面的代码可以显示p标签，因为v-if的参数值表达式判断是true --><div id="app"><!-- v-if可以通过判断表达式的真假动态的插入和移除元素 --><p v-if="key == 1">橘猫吃不胖</p></div><script>var vm = new Vue({el: "#app",data: {key: 1 // 显示p标签}})</script><!-- 下面的代码不可以显示p标签，因为v-if的参数值表达式判断是false --><div id="app"><!-- v-if可以通过判断表达式的真假动态的插入和移除元素 --><p v-if="key == 1">橘猫吃不胖</p></div><script>var vm = new Vue({el: "#app",data: {key: 0 // 不显示p标签}})</script>

示例代码：v-show

    <!-- 下面代码可以显示p标签，v-show参数值为true --><div id="app"><p v-show="isShow">橘猫吃不胖</p></div><script>var vm = new Vue({el: "#app",data: {isShow: true // 显示p标签}})</script><!-- 下面代码不能显示p标签，v-show参数值为false --><div id="app"><p v-show="isShow">橘猫吃不胖</p></div><script>var vm = new Vue({el: "#app",data: {isShow: false // 隐藏p标签}})</script>

但是二者是有区别的，具体如下：

实现方式不同：v-if底层采用的是appendChild来实现的，v-show通过样式的display控制标签的显示，正因为实现方式上面有差异，导致了他们的加载速度方面产生了差异；
加载性能不同：v-if加载速度更快，v-show加载速度慢
切换开销不同：v-if切换开销大，v-show切换开销小。

v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；v-show 也是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。

Vue中v-if和v-show的比较相关推荐

Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
vue v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧
我们知道在 Vue 中,style可以用两种方式来导入: // method1 @import ('./a.css'); //method2 复制代码但是不管哪一种,导进的css文件都是应用于全局的 ...
Oracle 中一些主要的V$视图种类
Oracle 中一些主要的V$视图种类类别描述和相关的V$视图数据库实例有关实际数据库实例的信息 V$ 视图: V$ACTIVE_INSTANCES,V$BGPROCESS,V$DAT ...
关于v$process与v$session中process的理解(转载)
http://www.itpub.net/thread-1077321-1-1.html(出处) 关于v$process与v$session中process的理解说明 v$session有个proc ...
VCS视频学习中的一个例子代码：dff.v和dff_tb.v
前言 VCS课程中的一个例子! dff.v //r/dff_exp.v module dff_exp(//Inputsinput wire clk_i,input wire rst_l_i,input ...
在Mac中设置Ctrl+C/V进行复制/粘贴
在Mac中设置Ctrl+C/V进行复制/粘贴从Windows世界走入Mac世界,最让不习惯的是在Mac中"复制/粘贴"的快捷键是Command+C/V.而且Command键与C/ ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
Vue 中 computed ,watch,methods 的异同
methods,watch和computed都是以函数为基础的. computed 和 watch 都可以观察页面的相应式数据的变化.当处理页面的数据变化时,我们有时候很容易滥用watch, 而通常更 ...

Vue中v-if和v-show的比较

Vue中v-if和v-show的比较

Vue中v-if和v-show的比较相关推荐

最新文章

热门文章