Vue内置指令（v-if和v-show的区别）

最新推荐文章于 2024-08-01 00:08:08 发布

Han_Zhou_Z

最新推荐文章于 2024-08-01 00:08:08 发布

阅读量1.3k

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/han_zhou_z/article/details/123585167

版权

本文详细介绍了Vue中的条件渲染指令v-if和v-else-if、v-else的用法，以及它们与v-show的区别。v-if在条件为假时不会渲染元素，而v-show则始终渲染但通过改变display属性控制显示。当涉及到频繁切换且需要避免DOM重用时，v-if更为合适，而v-show适合简单的显示隐藏需求。同时，文章通过示例解释了v-if下元素复用的问题及其解决方案——添加唯一key来避免复用。

摘要由CSDN通过智能技术生成

一、v-if、v-else-if、v-else（条件渲染指令）

1、v-if后接的是等号：等号后的内容必须是布尔值

2、v-if的基本用法

      <div id="app">
        <p v-if="6<3">{{name1}}</p>
        <p v-else-if="6>3">{{name2}}</p>
        <p v-else>{{name3}}</p>
      </div>
      <script>
        var app=new Vue({
            el:'#app',
            data:{
                name1:'小森',
                name2:'小沈',
                name3:'小顾',
            }
        })
      </script>

//渲染结果：小沈

v-if的弊端 : Vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，因此会出现原来的元素重复出现

        <div id="app">
            v-if用法：
        <div v-if="flag===true">
            姓名：<input type="text" placeholder="输入姓名">
        </div>
        <div v-else>
            密码：<input type="text" placeholder="输入密码">
        </div>
        <button @click="toggleShow">点击切换姓名和密码</button>
      </div>
      <script>
        var app=new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{
                toggleShow(){
                    this.flag=(this.flag===true?false:true)
                }
            }
        })
      </script>

当我们点击按钮时，input里面的内容依旧是小森，并没有进行重新渲染，还是复用了之前的。

解决方法：给不需要复用的元素里加一个唯一的key，提供key值就可以来决定是否复用该元素

        <div id="app">
            v-if用法：
        <div v-if="flag===true">
            姓名：<input type="text" placeholder="输入姓名" key="name">
        </div>
        <div v-else>
            密码：<input type="text" placeholder="输入密码" key="pass">
        </div>
        <button @click="toggleShow">点击切换姓名和密码</button>
      </div>
      <script>
        var app=new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{
                toggleShow(){
                    this.flag=(this.flag===true?false:true)
                }
            }
        })
      </script>

二、v-show

    <div id="app">
        <p v-show="9>a">我被显示1</p>
        <p v-if="9>a">我被显示2</p>
    </div>
    
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                a:10
            }
        })
    </script>

由此可见

v-if：页面显示就渲染，不显示就移除。如果出事渲染时条件为假，则什么都不做，直到条件为真时开始渲染，是dom操作，在dom树中加进去或者删除掉。而v-show无论初始条件是什么，元素都会被渲染，只是在条件为假时，display为none，条件为真时，则切换css样式。所以当用到获取数据的操作时，需要使用v-if

例如上面切换姓名和密码的案例。如果显示的是姓名，那么就只渲染姓名，密码就会被移除，具体可以看开发者工具中的Elements中是如何变化的。

v-show：v-show的元素永远存在于页面中，只是改变了css中display的属性