Vue stage3

<body>
    <div id="box1">
        <div v-bind:class="{ 'active': isActive， 'error': isError}"></div>
        <!-- 类名active依赖于数据isActive -->
    </div>
    <div id="box2">
        <div v-bind:class="classes"></div>
    </div>
    <div id="box3">
        <div v-bind:class="[activeCls,errorCls]"></div>
        <!-- <div v-bind:class="[isActive ? activeCls : '' ,errorCls]"></div>
        <div v-bind:class="[{isActive ? activeCls : '' },errorCls]"></div> -->
        <!-- 这几种写法是一样的 -->
    </div>
    <div id="toggleBox" v-bind:class = "classes" :style="styles">
       
    </div>
</body>
<script>
    //v-bind指令
    //常见的需求有对元素的样式名称与内联样式style的动态绑定
    var app = new Vue({
       el:"#box1",
       data:{
           isActive:true,
           isError:false
       } 
    });
    var app2 = new Vue({
       el:"#box2",
       data:{
           isActive:true,
           error:null
       },
       computed: {
           classes:function(){
               return {
                   active:this.isActive && !this.error,//与，当isActive为true且没有错误时才添加该类名
                   'text-fail':this.error && this.error.type === 'fail'//当报错且错误类型为fail时启用
               }
           }
       },
    });
    var toggle = new Vue({
       el:"#toggleBox",
       data:{
           size:'large',
           disabled:true,
           styles:{
               color:"red",
               fontSize:"15px",//15 + 'px'
               backgroundColor:white
           }
       },
       computed: {
           classes:function(){
               return [
                   'btn',{
                       ['btn-' + this.size]: this.size !== '',//当size不为空值时，相当于btn-large:true，即会应用btn-large样式
                       ['btn-disabled']: this.disabled
                        // 在写复用的组件时特别快乐，如ui-header-menu-cell...
                   }
               ]
           }
       },
    });
</script>
猜你喜欢
