vue.js繫結class

_code小學生發表於2018-03-25
Vue.js
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Vue.js -->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app1">
    <!--# 給v-bind設定一個物件，可以動態地切換class #-->
    <div :class="{'active':isActive}"></div>
</div>

<div id="app2">
    <!--# 給v-bind設定一個物件，可以動態地切換class #-->
    <!--# 物件中也可以傳入多個屬性，來動態切換class。另外，:class可以與普通class共存 #-->
    <div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>

<div id="app3">
    <!--# 給v-bind設定一個物件，可以動態地切換class #-->
    <!--# 當:class的表示式過長或邏輯複雜時，還可以繫結一個計算屬性，這是一種很友好和常見的用法，一般當條件多於兩個時，都可以使用data或computer #-->
    <div :class="classes"></div>
</div>
</body>
</html>
<script>
    //例子一
    var app1 = new Vue({
        el:'#app1',
        data:{
            //類名isActive，當其為true時，div會擁有類名active，為false時則沒有
            isActive:true
        }
    });


    //例子二
    var app2 = new Vue({
        el:'#app2',
        data:{
            //類名isActive，當其為true時，div會擁有類名active，為false時則沒有
            isActive:true,
            //類名isError，當其為true時，div會擁有類名error，為false時則沒有
            isError:true
        }
    });


    //例子三
    var app3 = new Vue({
        el:'#app3',
        data:{
            isActive:true,
            isError:false
        },
        computed:{
            classes:function () {

                return {
                    active:this.isActive && !this.isError
                }
                //除了計算屬性，你也可以直接繫結一個Object型別的資料，或者使用類似計算機屬性的methods
            }
        }
    })
</script>

相關文章