vue面试题 v-if 指令和 v-show 指令的区别

Mar-30

已于 2022-11-30 21:03:58 修改

阅读量519

点赞数 1

文章标签： javascript 前端开发语言

于 2022-11-30 21:03:45 首次发布

本文链接：https://blog.csdn.net/weixin_45856239/article/details/128121867

版权

1.v-if 指令

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

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

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

如果不满足条件，则该元素不会添加到DOM树中

 <!-- 导包 -->
    <script src="./vue.js"></script>
<body>

    <!-- HTML结构 -->
    <div id="app">
        <!-- lazy :懒加载，输入框失去焦点vue才会渲染数据  -->
        <input type="text" placeholder="请输入考试分数" v-model.number.lazy="score">
        <h2>你的考试分数为：{{ score }}</h2>
        <hr>
        <p v-if="score>=90">买车</p>
        <p v-else-if="score>=80 ">买房</p>
        <p v-else-if="score>=60 ">买零食</p>
        <p v-else>禁止回家</p>

    </div>

    <script>
        /* 创建vue实例 */
        //el:挂载点
        //data: 要渲染的数据
        let app = new Vue({
            el: '#app',
            data: {
                score: ''
            }
        })
    </script>
</body>

2.v-show 指令

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

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

(3)注意点: 显示与隐藏。只是修改元素的display属性值

 <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

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

3.【面试题】v-if和v-show区别

1.v-if : 本质是在动态的创建或者删除元素节点

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

v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销

2.v-show: 本质是在控制元素的 css 样式, display: none;

应用场景：如果是频繁的切换显示隐藏, 用 v-show

v-if, 频繁切换会大量的创建和删除元素, 消耗性能

v-if和v-show区别面试题逐字稿参考：

面试官你好，我是这么理解v-if和v-show的。 v-if本质其实是动态的创建或者删除元素节点。一般不用频繁切换, 要么显示, 要么隐藏的情况, 我都会用 v-if。因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。 v-show本质是在控制元素的 css 样式,display: none;，一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。