李阳看前端----宇宙新vue-v-show-----v-if的区别

代码真想

于 2021-04-08 08:13:10 发布

阅读量76

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/ly479488874/article/details/115501028

版权

1.v-if----v-show的区别

当条件为真的时候这两者是没有区别的，都是控制元素的一个显示，条件为假的时候v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过display属性来控制 2、v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换

v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

<body>
<div id="app">
    <input type="button" @click="show-click" value="显示/隐藏">
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            flag:true,
        },
        methods:{
            show-click(){
               this.flag=!this.flag;
               // 也可直接在button 中写@click="this.flag=!this.flag"
            },
        }
    })
</script>
</body>

代码真想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
李阳看前端----宇宙新vue-v-show-----v-if的区别

1.v-if----v-show的区别当条件为真的时候这两者是没有区别的，都是控制元素的一个显示，条件为假的时候v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过display属性来控制 2、v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。<body><div id="app"> <input type="button" @click="sho
复制链接

扫一扫