当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue.js库中的条件渲染介绍

vue.js库中的条件渲染介绍

2019年01月12日  | 移动技术网IT编程  | 我要评论

vue.js库中的条件渲染介绍

<body>  
    <p id="app">  
        <p v-if="isshow">这是使用v-if的标签</p>  <!--p不显示-->  
        <p v-else>这是使用v-else的p标签</p>      <!--p显示-->  
  
        <p v-show="isshow">这是使用v-show的标签</p>  <!--p不显示-->  
  
        <p v-if="code=='a'">a</p>  
        <p v-else-if="code=='b'">b</p>  
        <p v-else-if="code=='c'">c</p>  
        <p v-else>not a/b/c</p>       <!--显示not a/b/c-->  
    </p>  
    <script>  
        var vm = new vue({  
            el:'#app',  
            data:{  
                isshow:false,  
                code:'d'  
            }  
        })  
      
    </script>  
</body>

注意点：

1. v-if = false,元素直接销毁，html结构里面不再存在这个元素

2. v-show=false:元素的display样式被设置为none，被隐藏起来，未被销毁

3. 所以v-show 的性能高于v-if

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网