Vue.js中如何控制元素的显隐，v-show和v-if的语法是怎样-群英

Vue.js中如何控制元素的显隐，v-show和v-if的语法是怎样

Admin发表于 2022-06-01 17:30:141133 次浏览

在实际案例的操作过程中，我们可能会遇到“Vue.js中如何控制元素的显隐，v-show和v-if的语法是怎样”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧。

一、v-show指令

v-show指令可以用来动态的控制dom元素的显示或隐藏。v-show后面跟的是判断条件，语法如下：

v-show="判断变量"

例如：

v-show="true"，表示显示dom元素。

v-show="false"，表示隐藏dom元素。

看下面的示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>v-show指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new vue({
               el:"#my",
               data:{
                      flag:true,//布尔型
                      imglist:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <ul>
             <li v-for="list in imglist">
                 <img :src="list" v-show="flag" style="height:100px;width:300px;">
             </li>
         </ul>
    </div>
</body>
</html>

运行效果：

将flag变量改为false，代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>v-show指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new vue({
               el:"#my",
               data:{
                    /*   flag:true,//布尔型 */
                    flag:false,//布尔型
                    imglist:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <ul>
             <li v-for="list in imglist">
                 <img :src="list" v-show="flag" style="height:100px;width:300px;">
             </li>
         </ul>
    </div>
</body>
</html>

运行效果：

这里只会显示三个<li元素>，但不会显示img元素。

二、v-if指令

v-if指令的用法和v-show指令的用法相同，都是用来控制dom元素的显示或隐藏。代码示例如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>v-if指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new vue({
               el:"#my",
               data:{
                    flag:true,//布尔型 
                    imglist:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <ul>
             <li v-for="list in imglist">
                 <img :src="list" v-if="flag" style="height:100px;width:300px;">
             </li>
         </ul>
    </div>
</body>
</html>

运行效果：

三、v-show和v-if的区别

v-show和v-if都可以用来控制dom元素的显示或隐藏，那么这两个指令有什么区别呢？

v-show和v-if指令的区别主要在于设置dom元素隐藏的时候：

v-show指令设置隐藏是为该元素添加css样式--display:none,但dom元素还存在
v-if指令设置隐藏是将dom元素整个删除，dom元素不在存在

看下面的示例：

v-show设置隐藏：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>v-show指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new vue({
               el:"#my",
               data:{
                    /*   flag:true,//布尔型 */
                    flag:false,//布尔型
                    imglist:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <ul>
             <li v-for="(list,index) in imglist">
                 <!-- <img :src="list" v-show="flag" style="height:100px;width:300px;"> -->
                 <!--索引等于1的时候显示，索引不等于1的时候隐藏-->
                 <img :src="list" v-show="index==1" style="height:100px;width:300px;">
             </li>
         </ul>
    </div>
</body>
</html>

检查元素：

从生成的html结构中可以看出，索引不等于的元素被隐藏了，只是添加了css样式：display:node，但是该元素还存在。下面看看v-if

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>v-if指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new vue({
               el:"#my",
               data:{
                    flag:true,//布尔型 
                    imglist:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <ul>
             <li v-for="(list,index) in imglist">
                 <!-- <img :src="list" v-if="flag" style="height:100px;width:300px;"> -->
                  <!--索引等于1的时候显示，索引不等于1的时候隐藏-->
                  <img :src="list" v-if="index==1" style="height:100px;width:300px;">
             </li>
         </ul>
    </div>
</body>
</html>

检查元素：

从生成的html结构中可以看出，索引不等于1的元素被隐藏了，这里是直接删除了img元素，不占用位置。

更详细的区别：（借鉴别人博客内容，博客地址：）

1.手段：v-if是动态的向dom树内添加或者删除dom元素；v-show是通过设置dom元素的display样式属性控制显隐；
2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且dom元素保留；
4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
5.使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

四、v-else指令

v-else指令不需要表达式，但有一个限制条件：前一兄弟元素必须有v-if或者v-else-if指令。

用法：为v-if或者v-else-if添加“else 块”。

看下面的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>vue指令：v-if v-else</title>
    <!--引入vue.js-->
    <script src="./js/vue.js"></script>

</head>
<body>
    <div id="app">
        <h1>num值：{{num}}</h1>
        <div v-if="num > 5" id="div1">
             now you see me
        </div>
        <!--v-else指令不需要表达式，配合前面的v-if使用-->
        <div v-else>
            now you don't
        </div>
    </div>
    <script>
            // 实例化vue对象
            var vm = new vue({
                // 挂载元素
                el:"#app",
                data:{
                    num:math.random()
                },
                methods:{
     
                }
            });
         </script>
</body>
</html>

浏览器运行结果：

可以看到：num的值不大于5，所以v-if表达式的值为false，所以会显示v-else指令所在标签。

五、v-else-if

v-else-if使用限制：前一兄弟元素必须有v-if或者v-else-if。

用法：v-else-if表示v-if的“else-if”块，可以链式调用。

看下面代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>vue指令：v-if v-else</title>
    <!--引入vue.js-->
    <script src="./js/vue.js"></script>

</head>
<body>
    <div id="app">
        <!-- <h1>num值：{{num}}</h1>
        <div v-if="num > 5" id="div1">
             now you see me
        </div> -->
        <!--v-else指令不需要表达式，配合前面的v-if使用-->
        <!-- <div v-else>
            now you don't
        </div> -->

        <div v-if="type === 'a'">
             a 
        </div>
        <div v-else-if="type === 'b'">
             b
        </div>
        <div v-else-if="type === 'c'">
            c
        </div>
        <div v-else>
            not a/b/c
        </div>
    </div>
    <script>
            // 实例化vue对象
            var vm = new vue({
                // 挂载元素
                el:"#app",
                data:{
                    num:math.random(),
                    type: 'b'
                },
                methods:{
     
                }
            });
         </script>
</body>
</html>

浏览器运行结果：

现在大家对于Vue.js中如何控制元素的显隐，v-show和v-if的语法是怎样的内容应该都清楚了吧，希望大家阅读完这篇文章能有所收获。最后，想要了解更多Vue.js中如何控制元素的显隐，v-show和v-if的语法是怎样的知识，欢迎关注群英网络，群英网络将为大家推送更多相关知识点的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： Vue.js,v-show,v-if

上一篇： Vue.js中什么方法有遍历功能，v-for指令具体用法是怎样

下一篇： .NET CORE的配置文件只能用xml格式吗