Vue中計算屬性與class,style綁定


    var vm=new Vue({  
        el:'#app',  
        data:{  
            a:2,  
        },  
        computed:{  
            //這里的b是計算屬性:默認getter  
            b:{   
                get:function(){  
                    return this.a+1  
                },  
                set:function(newValue){  
                    this.a=newValue-3             
                }  
            }  
        }  
    });  
    console.log(vm.b);//3  
    vm.a=3;  
    console.log(vm.b);//4  
    vm.b=8;  //設置vm.b=8會調用set方法,vm.a變為5  
    console.log(vm.a);//5  
    <!--  Class綁定  -->  
       1.v-bind:class和普通屬性class可以並存(對象語法)  
       <div class="static" v-bind:class="{'classA':isA,'classB':isB}"></div><br />  
       渲染為:<div class='static classA classB'></div>  
       2.可以直接綁定數據里面的一個對象  
       <div v-bind:class="classObject"></div>  
    渲染為:<div class="class-c"></div><br />  
    3.傳遞數組給:class(數組語法)  
    <div :class="[classA,classB]"></div>  
    渲染為:<div class="class-a class-b"></div>  
    <br /><br />  
    <!--  Style綁定  -->  
    1.對象語法  
    <div :style="{color:activeColor,fontSize:fontSize+'px'}">Test</div>  
    <div :style="styleObject">Test</div>  
    2.數組語法  
    <div :style="[styleObjectA,styleObjectB]"></div>  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM