vue2.0 筆記（雜記）

1、vue class、style表達式的類型： 字符串、對象和數組
一、字符串

<div class="static" v-bind:class="class-a">
// 結果：
<div class="static class-a"></div>

 

二、對象 :class="{ 'key': value變量, 'key': value變量 }" 或者 :class="對象key"

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

data: {
　　isA: true,
　　isB: false
}
// 結果：
<div class="static class-a"></div>

等同於：（更簡潔）

<div class="static" v-bind:class="classObject"></div>

data: {
    classObject: {
        'class-a': true,
        'class-b': false
    }
}

 

三、數組 :class="[value變量, value變量]"

<div v-bind:class="[classA, classB]">

data: {
    classA: 'class-a',
    classB: 'class-b'
}
// 結果：
<div class="static class-a class-b"></div>

 

四、綜合應用
三元表達式：

<div v-bind:class="[isActive ? classA : '', classB]"></div>

data: {
    isActive: true,
    classA: 'class-a',
    classB: 'class-b'
}

// 結果同上

簡化後

<div v-bind:class="[{class-a: isActive}, classB]"></div>

data: {
    isActive: true,
    classB: 'class-b'
}
// 結果同上

2、style樣式綁定與class原理相同

注意點：
一、CSS 屬性名能夠用駝峯式 (camelCase) 或短橫線分隔 (kebab-case，需用單引號括起來) 來命名
二、2.3.0+ 添加前綴，只匹配兼容的之一
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

3、v-for

數組中： v-for="(item[, index]) in arrays" 或者 v-for="item of arrays"
對象中： v-for="(value[, key, index) in object"