首页 > 资讯 > 前端开发 > JavaScript >Vue.js中v-show和v-if指令的用法介绍

321

分享到

Vue.js中v-show和v-if指令的用法介绍

2024-04-02 19:04:59 321人浏览薄情痞子

摘要

目录一、v-show指令二、v-if指令三、v-show和v-if的区别四、v-else指令五、v-else-if一、v-show指令 v-show指令可以用来动态的控制DOM元素的

一、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: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: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元素，不占用位置。

更详细的区别：（借鉴别人博客内容，博客地址：//www.jb51.net/article/240646.htm）

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>

浏览器运行结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue.js中v-show和v-if指令的用法介绍

本文链接: https://www.lsjlt.com/news/142332.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue.js中v-show和v-if指令的用法介绍

目录一、v-show指令二、v-if指令三、v-show和v-if的区别四、v-else指令五、v-else-if一、v-show指令 v-show指令可以用来动态的控制DOM元素的...

99+

2024-04-02
Vue.js中v-show和v-if指令怎么用

小编给大家分享一下Vue.js中v-show和v-if指令怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、v-show指令v-show指令可以用来动态的控...

99+

2023-06-29
VUE中的v-if与v-show区别介绍

1.共同点都是动态显示DOM元素 2.区别（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；（2）...

99+

2024-04-02
Vue.js中v-model指令的用法介绍

一、v-model指令 v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。使用v-model可以在表单控件或者...

99+

2024-04-02
Vue指令v-show和v-if怎么使用

本文小编为大家详细介绍“Vue指令v-show和v-if怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue指令v-show和v-if怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。一、v-sho...

99+

2023-06-29
Vue.js中v-for指令的用法介绍

一、什么是v-for指令在Vue.js中，我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能，包括遍历数组、对象、数组对象等。二、遍历数...

99+

2024-04-02
Vue.js中v-on指令的用法介绍

v-on指令 v-on指令在Vue.js中用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联预计，如果没有修饰符也可以省略。用在普通元素上时，只能监听原生...

99+

2024-04-02
Vue.js中v-bind指令的用法介绍

一、什么是v-bind指令 v-bind指令用于响应更新HTML特性，允许将一个或多个属性动态绑定到表达式。v-bind是应用在动态属性上面的。二、语法 v-bind语法如下： v...

99+

2024-04-02
Vue的v-if和v-show的区别图文介绍

目录一、v-if和v-show区别二、生命周期三、性能的差异一、v-if和v-show区别 ① v-show严格意义来说其实是条件隐藏，直接在页面初始化的时候将DOM(对象模型)元素...

99+

2023-03-06

Vue的v-if和v-show区别 Vue的v-if使用
Vue中常用指令v-if, v-for, v-show,v-else, v-bind, v-on有什么用

这篇文章给大家分享的是有关Vue中常用指令v-if, v-for, v-show,v-else, v-bind, v-on有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。V...

99+

2024-04-02
vue中v-if和v-show的区别

vue中v-if和v-show的区别是：1.用法不同；2.意义不同；3.组合功能不同等。用法不同，当隐藏结构时v-if结构会直接从整个dom树中移除，而v-show结构的style中加上display:none，结构依然保留。意义不同，v-...

99+

2024-04-02
Vue中v-if、v-if-else、v-else-if与v-show的基本使用

目录一、Vue的条件渲染1.1.v-if1.2.v-if-else1.3.v-else-if 1.4.template元素 1.5.v-show1.6.v...

99+

2022-11-13

vue v-if v-show else if的用法 vue v-if else
Vue常用指令v-if与v-show的区别浅析

目录前言1. v-show2. v-if 3. v-show和v-if的区别 1. 在原理方面的区别2. 在使用应用场景方面的区别总结前言 v-show 和v-if 是比较...

99+

2024-04-02
vue中v-if和v-show命令有什么区别

这篇文章将为大家详细讲解有关vue中v-if和v-show命令有什么区别，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。v-if和v-show 的区别是什么？第一种回答方式...

99+

2024-04-02
vue中的v-show,v-if,v-bind怎么使用

这篇文章主要介绍了vue中的v-show,v-if,v-bind怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue中的v-show,v-if,v-bind怎么使用文章都会有所收获，下面我们一起来看看吧...

99+

2023-07-05
vue中的v-if和v-show有什么区别

小编给大家分享一下vue中的v-if和v-show有什么区别，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ ...

99+

2024-04-02
vuejs中v-if和v-show的区别有哪些

小编给大家分享一下vuejs中v-if和v-show的区别有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.官网概念描述v...

99+

2024-04-02
v-show和v-if的区别及应用场景

目录一、v-show与v-if的共同点二、v-show与v-if的区别三、v-show与v-if原理分析v-show原理v-if原理四、v-show与v-if的使用场景一、v-sh...

99+

2024-04-02
vue中的v-show,v-if,v-bind的使用示例详解

目录vue第四课：v-show,v-if,v-bind的使用1，v-show指令2，v-if指令3，v-bind指令vue第四课：v-show,v-if,v-bind的使用 1，v-...

99+

2023-05-14

vue v-show vue v-if vue v-bind
vue中v-if和v-show使用区别源码分析

目录一、v-if1、render2、vNode3、patch小结二、v-show1、render2、vNode3、patch(1)normalizeDirectives(2)call...

99+

2024-04-02