vue中v-if和v-show条件为false时的区别

最新推荐文章于 2023-08-23 11:05:03 发布
最新推荐文章于 2023-08-23 11:05:03 发布
阅读量5.9k 收藏 1
点赞数
分类专栏： vue 文章标签： vue v-if v-show

vue中v-if和v-show 条件为false时的区别
v-if中条件为false时，标签不存在，v-show中条件为false时，标签是默认隐藏样式。
原地址：https://www.cnblogs.com/rik28/p/6024425.html
v-if:
例子：

 <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 24,
                name: 'keepfool'
            }
        })
    </script>

结果：

在这里插入图片描述
v-show：
例子：

<body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-show="yes">Yes!</h1>
            <h1 v-show="no">No!</h1>
            <h1 v-show="age >= 25">Age: {{ age }}</h1>
            <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 24,
                name: 'keepfool'
            }
        })
    </script>

结果：
在这里插入图片描述

weixin_44563660
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue常见用法
weixin_45932704的博客
11-21 947
vue.js常见语法
vue 翻页组件vue-flip-page效果
11-21
方法 change （改变页面） ...turning （正在翻页） prev （前一页） next （后一页） 翻到指定页面： handleSwitchManual(index) { if (index === this.currentIndex) return;... this.show = false;
vue使用v-if v-show页面闪烁,div闪现的解决方法
12-12
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。 可以在根元素添加v-cloak来解决，并且设置它的样式即可。 代码只是示例，还需要自己修改测试。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 在引入的css文件中写入这个*/ [v-cloak] { display: none; } </style> </head> <body> <!-- 添加这个v-cloak --> <div id='ap
Vue中v-if、v-show、display：none和visibility：hidden的区别
zzzz121380的博客
10-28 5148
Vue中v-if和v-show与display:none和visibility: hidden的区别 1、v-if="false"和v-show="false"以及display:none都是网页中不占任何的位置。 v-show="false"相当于display:none; 2、visibility: hidden;只是单纯的隐藏元素，占据位置 3、v-if="false"的时候在控制台状态是注释状态没有实际渲染 v-show与 v-if 比较 v-show 指令的功能与 v-if 指令相似。不过 v-i
vue指令
Zzzzsg_的博客
05-26 669
指令 Vue 指令 组件 作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM 以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM 这个指令需要模板语法的支持，所以我们采用jsx语法糖–>{{ }} 指令 1. 格式： v-xxx = "mustache语法" v-xxx = "msg" ...
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
boxuestudio的博客
02-21 8703
教程3 Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）
v-if false vue 销毁
03-13 803
当组件的v-if 为false时,该组件生命周期会销毁,所以会执行destroy(){}钩子里的方法。
Vue学习第五章-条件判断与循环遍历
01-08
与v-if类似的还有 v-show='\u6761\u4ef6',两者的区别v-if的条件为false时，对应的元素不会存在于dom而v-show则始终存在。因此v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换...
vue页面加载闪烁问题的解决方法
12-09
v-if 和 v-show 的区别 v-if只会在满足条件时才会编译，而v-show不管是否满足条件始终会编译，v-show的显示与隐藏只是简单的切换CSS的display属性。 也就是说，在使用v-if时，若值为false，那么页面将不会有这个html...
Vue 全局loading组件实例详解
12-09
上图不上种，菊花万人捅： loading.js: import './loading.css' let Loading = {} ... Vue.prototype.$loading.show = () => { // 如果页面有loading则不继续执行 if (document.querySelector
vue常见的指令
m0_51328823的博客
01-27 534
vue常见的指令 ????v-text(相当于原生js中的innerText) 解析文本 两者等价 <span v-text="msg"></span> <span>{{msg}}</span> ????v-html(相当于原生js中的innerHTML) 与v-text相比，v-html可以解析标签 <p v-html="<span>你好</span>"></p> ????v-once(只渲染一次) 只
Vue中的条件渲染v-if、v-show
m0_59345890的博客
08-30 305
拿v-if=""来说，其底层就是if(){}语句，""中传入的表达式就会放在()小括号内判断，最终得出true或false，这个就是JS的语法了。最开始flag为true,box11显示，box12移除，点击按钮触发事件后flag取反，box11移除，box12显示，再点再取反，就达到切换效果。可以看到只有3和7没有显示在，其余的都显示了，就应证了我们前面所说的JS环境下解析表达式为true显示，false不显示。反之为false时，v-if或v-show所在的标签显示。那这两个指令到底谁好呢？...
v-show的值看似变了却没反映到dom上？原来是this搞得鬼
qq_41588568的博客
04-19 1427
要实现的效果： dom部分的代码： data部分的代码： methods部分的代码： 但效果却是，刚开始rightShow是false是有效果的，那个向右的箭头图标是隐藏的，但是我点击之后，值变成true了，但是向右的图标出不来。这样看起来就是值变化了，但是没反映到dom上，很是纳闷是怎么回事，后来突然想到以前看过就是在嵌套了很多次函数什么的this的值可能会有...
v-if 和v-show条件渲染
xyfck的博客
09-17 1000
v-if v-show的区别、使用
Vue2中 v-show为false 元素依然显示
m0_73461567的博客
02-02 993
v-show在 uni-app 某些情况下不生效的bug，使用 v-if (情况不明)
elementui form表单el-form-item使用v-show控制显示隐藏，在提交时 rules 验证错误的问题
weixin_43601701的博客
06-09 9161
本篇博文深入研究了在使用Element UI构建表单时的一项常见挑战——即便表单项被隐藏，仍然会进行验证。这个问题的出现源于Vue的v-show指令。我们提出了两种创新策略和对应的代码示例来克服这个问题：首先，我们引入Vue的v-if指令来控制表单项的渲染，这样就可以避免对隐藏的表单项进行验证；其次，我们引入动态的验证规则，这样在隐藏表单项时，可以同时移除对应的验证规则。这两种方法都能有效地解决表单验证的"隐形"问题，提升了Element UI表单的性能和用户体验。这篇博文对于前端开发者来说具有很高的参考
Vue指令篇_v-if、v-else、v-else-if
桃花扇的博客
07-21 1188
1.v-if 作用：条件性的渲染一块内容，这块内容只会在指令的表达式为真值时被渲染。 2.v-else 3.v-else-if
疑难杂症——vue中v-show=“false” 隐藏元素 不生效
最新发布
m0_71071511的博客
08-23 1153
解决 v-show因为权重不生效问题
【生命周期钩子函数】【对比Vue2和Vue3中对v-if和v-show触发父子组件生命周期钩子的不同】
Julie_bing的博客
08-08 428
vue2和vue3中、普通变量和子组件，v-if和v-show的区别
Vue中v-if和v-show区别
06-09
`v-if` 和 `v-show` 都是 Vue 中用于控制元素显示隐藏的指令，但它们的使用场景和实现方式略有不同。 `v-if` 指令的作用是根据表达式的值的真假条件来销毁或者重新创建元素及组件。当表达式的值为 false 时，元素会被销毁并从 DOM 中移除，当表达式的值为 true 时，元素会被重新创建并添加到 DOM 中。这种方式在不需要频繁切换元素显示状态的情况下，能够有效减少 DOM 的渲染次数，提高性能。 ```html <template> <div> <span v-if="show">我是一个v-if指令</span> <button @click="toggleShow">切换显示状态</button> </div> </template> <script> export default { data() { return { show: true } }, methods: { toggleShow() { this.show = !this.show } } } </script> ``` `v-show` 指令的作用是根据表达式的值的真假条件来控制元素的显示或隐藏。当表达式的值为 false 时，元素会被隐藏，并且不会从 DOM 中移除，当表达式的值为 true 时，元素会被显示。这种方式适用于需要频繁切换元素显示状态的情况，但需要注意，由于元素并没有被销毁，因此可能会影响页面的性能。 ```html <template> <div> <span v-show="show">我是一个v-show指令</span> <button @click="toggleShow">切换显示状态</button> </div> </template> <script> export default { data() { return { show: true } }, methods: { toggleShow() { this.show = !this.show } } } </script> ``` 总结来说： - `v-if` 适合在不需要频繁切换元素显示状态的情况下使用，可以减少 DOM 的渲染次数，提高性能。 - `v-show` 适合在需要频繁切换元素显示状态的情况下使用，但需要注意对页面性能的影响。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值