v-show 和v-if 的笔记

Yan_Gold

于 2022-09-19 19:19:14 发布

阅读量44

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Yan_Gold/article/details/126939778

版权

v-show。。。

<body>
    <script src="./vue.js"></script>
    <div id="app">
        <div v-show="display">我是由v-show控制的</div>
        <div v-if="display">我是由v-if控制的</div>
        
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                display:true
            }
        })
        
    </script>
</body>

v-show和v-if都可以用来控制标签的显示和隐藏

<标签v-show=‘布尔值’></标签>

<标签 v-if=“布尔值”></标签>

当布尔值为true，它们就显示，当布尔值为false，他们就隐藏。

v-show

1，v-show本质是标签display设置为none，控制隐藏，只是基于css进行切换

2，v-show由更高的初始渲染消耗

3，v-show适合频繁切换的情况

v-if

1，v-if动态的向dom树内添加或者删除dom元素

2，v-if有更高的切换消耗

3，v-if适合运行条件很少改变的情况