您的当前位置：首页正文

v-if 与 v-show的区别

来源：榕意旅游网

一 . 区别 :

v-if : 根据条件渲染 . 本质是动态的创建和删除元素节点 . 如果不满足条件，则该元素不会添加到DOM树中.
v-show: 一定会渲染 . 本质是元素的显示与隐藏。只是修改元素的display属性值.

二 . v-if指令 :

(1) 作用 : 根据条件渲染数据

(2) 语法 : 单分支： v-if="条件语句"
双分支： v-else
多分支 : v-else-if="条件语句"

(3) 注意点 : v-else与v-else-if的前面必须要有v-if 或v-else-if

(4) 代码演示 :

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <!-- lazy :懒加载，输入框失去焦点vue才会渲染数据  -->
        <input type="text" v-model.lazy="score" placeholder="请输入考试分数">
        <h2>你的考试分数为：{{ score }}</h2>
        <hr>
        <h3 v-if="score>=90">优秀</h3>
        <h3 v-else-if="score>=80">\良好</h3>
        <h3 v-else-if="score>=60">合格</h3>
        <h3 v-else>不合格</h3>
    </div>
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                score: '',
            }
        })
    </script>
</body>
</html>

三 . v-show指令 :

(1) 作用 : 设置元素的display属性值

(2) 语法 : v-show="属性值"
属性值为true: 元素的display:block
属性值为false: 元素的display:none

(3) 代码演示 :

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <p v-if="age>=20">我是v-if渲染出来的</p>
        <p v-show="age>=20">我是v-show渲染出来的</p>
    </div>
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                age: 18,
            }
        })
    </script>
</body>
</html>

四 . 适用场景 :

v-if : 如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if

v-show : 如果是频繁的切换显示隐藏, 用 v-show

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文