Vue学习08-----v-if和v-show

最新推荐文章于 2022-09-02 13:53:16 发布

小虾米的成长之路

最新推荐文章于 2022-09-02 13:53:16 发布

阅读量145

点赞数

分类专栏： Vue 文章标签： vue v-if v-show

本文链接：https://blog.csdn.net/baidu_41690072/article/details/102769802

版权

Vue 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<!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>Document</title>
</head>
</body>
    <div id="app">

        <input type="button" value="隐藏" @click="toggle">
        <input type="button" value="隐藏1" @click="flag=!flag">
        <!--
            v-if的特点：每次都会重新删除或创建元素
            v-show的特点：每次不会重新删除或创建元素，只是切换了 display:none样式
        -->
        <!--
            v-if有较高的切换性能消耗
            v-show有较高的初始渲染消耗
            若有元素可能永远也不会被显示出来被永华看到，则推荐v-if
            若有元素设计频繁切换，最好用v-show
        -->
        <h3 v-if="flag">这是v-if控制的元素</h3>
        <h3 v-show="flag">这是v-show控制的元素</h3>
    </div>
<body>
    <script src="./lib/vue.js"></script>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               flag :true,
           },
           methods:{
               toggle(){
                   this.flag = !this.flag;
               }
           }
        });
    </script>
</html>

小虾米的成长之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习08-----v-if和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...
复制链接

扫一扫

专栏目录