Vue中v-if和v-show的特点

红太狼 2023-02-21 11:50 13阅读 0赞

v-if和v-show都是控制元素的显示和隐藏  
但是他两有区别：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../js/vue-2.4.0 .js"></script>
        <title>Document</title>
    </head>
    <body>
        
        <div class="showif">
            <input type="button" value="toggle" @click = 'button1'>
            
            
            
            <h3 v-if='flag1'>这是一个v-if控制的元素</h3>
            
            <h3 v-show='flag1'>这是一个v-show控制的元素</h3>
        </div>
        <script>
            var fn7 = new Vue({ 
                el: '.showif',
                data: { 
                    flag1 : true,
                },
                methods: { 
                    button1(){ 
                        this.flag1 = !this.flag1
                    }
                }
            })
        </script>
    </body>
    </html>

**Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题**  
**解决**：

// <div> 不会显示，直到编译结束。
    [v-cloak] {
    display: none;
    }
    <div v-cloak>
    {
       { message }}
    </div>

![在这里插入图片描述][20200630131813408.png]

[20200630131813408.png]: https://img-blog.csdnimg.cn/20200630131813408.png

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 synchronized的特点,特点和基本使用以及优化机制

Synchronized 的特性: synchronized可以保证原子性被 synchronized加锁的代码块只允许拿到锁的线程进入同步代码

╰+攻爆jí腚メ/ 2024年03月23日 12:57/ 0 赞/ 57 阅读

相关 Spark 中 ML 和 MLlib 的特点和区别

> 大数据学习过程中一个重要的环节就是spark，但是在spark中有很多的知识点，很多人都傻傻分不清楚，其中，最易搞混的就是ml与mllib的区别，所以我们不妨来详细的了解一

布满荆棘的人生/ 2023年10月10日 08:19/ 0 赞/ 29 阅读

相关 VUE优点有哪些?VUE的特点介绍

目前市场三大前端主流框架分别是Angular、React和Vue。Vue之所以被开发者青睐，主要是Vue乘承了Angular和React框架两者的优势，并且Vue的代码简洁、上

ゝ一纸荒年。/ 2023年10月07日 18:47/ 0 赞/ 38 阅读

相关继承和组合的特点和区别

类继承和对象组合是代码复用的两种最常用的技术一、继承继承是 Is-a 的关系，比如说Student继承Person,则说明Student is a Perso

爱被打了一巴掌/ 2023年08月17日 16:02/ 0 赞/ 156 阅读

相关 Vue中v-if和v-show的特点

v-if和v-show都是控制元素的显示和隐藏但是他两有区别： <!DOCTYPE html> <html lang="en"> <head>

红太狼/ 2023年02月21日 11:50/ 0 赞/ 14 阅读

相关 java容器的分类和特点_C++中各种容器的类型与特点

Java教程-Java 程序员们值得一看的好书推荐学习的最好途径就是看书“,这是我自己学习并且小有了一定的积累之后的第一体会.个人认为看书有两点好处: 能出版出来的书一定是

素颜马尾好姑娘i/ 2022年11月09日 12:39/ 0 赞/ 18 阅读

相关 VIF检验相关性

`VIF`可以用来度量多重共线性问题， V I F j = 1 1 − R j 2 \\quad \\mathrm\{VIF\}\_\{j\}=\\frac\{1\}\{1-R

冷不防/ 2022年09月12日 02:55/ 0 赞/ 301 阅读

相关 java中关键字的定义和特点

关键字的定义和特点定义：被Java语言赋予了特殊含义，用做专门用途的字符串（单词）特点：关键字中所有字母都为小写 ![Image 1][] ![Image

不念不忘少年蓝@/ 2022年07月13日 08:43/ 0 赞/ 255 阅读

相关 softmax函数的特点和作用

softmax函数定义：假设我们有一个数组，V，Vi表示V中的第i个元素，那么这个元素的Softmax值就是 ![这里写图片描述][Image 1] 即某元素的指

- 日理万妓/ 2022年05月26日 13:18/ 0 赞/ 190 阅读

相关 MySQL和MongoDB的区别和特点

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] MySQL概述 ![b9674cfec7bfc3e

一时失言乱红尘/ 2022年01月13日 13:55/ 0 赞/ 345 阅读