vue中，class、內聯style綁定、computed屬性

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
        }
      }
    });

輸出的結果為：