1.綁定Class
①對象語法
<li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)">產品特色</li>
②數組語法
<div v-bind:class="[classA, classB]">
三元表達式:
<div v-bind:class="[classA, isB ? classB : '']">
表明始終添加classA,在isB爲true時添加classB
2.綁定內聯style
<li class="slider" v-bind:style="{marginLeft: leftIndex}"></li>
data: { leftIndex: '0.167%' }
!注意:margin-left寫成marginLeft
也可以綁定到一個樣式對象
<div v-bind:style="styleObject"></div>
data: { styleObject: { color: 'red', fontSize: '13px' } }
同樣注意font-size寫成fontSize,否則會出錯。
3.computed屬性
<div id="demo">{{ fullName }}</div>
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar2', }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } });
輸出的結果爲: