Vue從零開始總結5
很多時候我們不能把展示的內容寫死,否則后期更新維護會相當麻煩,所以這時就需要用v-bind來進行動態(tài)綁定,如:v-bind:src或者v-bind:href,官方呢,也給出了語法糖,用于簡寫,就一個:就可以了,如:src或者:href,這樣做就可以從服務器里面動態(tài)獲取地址了
v-bind:還可以動態(tài)綁定class屬性,如:v-bind:class="{className:flag}",注意一定要加{}
這里的{}里面是對象,className后面:代表的boolean值,如果flag為真那么就執(zhí)行
有時候我們可以通過改變flag的值來決定是否采用這個樣式
如:v-on:click="change"寫在某個標簽上,緊接著在data里面定義flag:true,然后在model里面中的methods中定義function :change(){this.flag=!this.flag}
當我們綁定了多個class時,會造成數據的冗余,查看起來很不方便,這時我們就可以把對象寫進函數里面,如:classAll:function(){return {className:this.flag};},然后在class="classAll()".注意this得加
動態(tài)綁定class除了對象方法外還有數組方法,如:class="[one,two]",然后在data里面添加one:'類名1',two:'類名2',同樣的也可以寫到methods里面,classAll:function(){return [this.one,this.two];},同樣的也可以建立標志位,如:
<p :class="[{one:flag},{two:flag}]">awslm</p>
classAllOther:function (){
? ?return [{one:this.flag},{two:this.flag}];
}
在這里不建議在data里面換class名,如:one:'ones',two:'twos',這樣改很難加判斷標識flag