手把手教你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>

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