手把手教你VUE从入门到放弃—— 篇十一(vue中的条件渲染 v-if,v-else,v-else-if,v-show与v-if的使用与区别)

v-if,v-else,v-else-if就不多说了,跟你学的其它语言一样用法,这里重点说下

v-if与v-show的区别   两者都是若表达式为true则显示,但是表达式为false的时候 v-if会去除当前dom元素,而v-show则会保留只是不显示罢了 会变成如右侧样式 

测试源码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的样式绑定</title>
      <script src="vue.js"></script>
     
     <style type="text/css">
            .class111{
                color:red;
            }
     </style>
     
</head>
<body>
    <div id = 'app2'>
        <div v-if="boo1" @click="changeBoo">你好啊1</div>
        <div v-show="boo1" @click="changeBoo">你好啊1</div>
    </div>
    <script>
        var app = new Vue({
            el:'#app2',
            data:{
                boo1:true
                },
           methods:{
               changeBoo:function(){
                   this.boo1 = !this.boo1;
               }
           }
        });
    </script>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章