vue2.0 笔记（杂记）

一、vue class、style表达式的类型： 字符串、对象和数组
1、字符串

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

 

2、对象 :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
    }
}

 

3、数组 :class="[value变量, value变量]"

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

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

 

4、综合应用
三元表达式：

<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'
}
// 结果同上

二、style样式绑定与class原理相同

注意点：
1、CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，需用单引号括起来) 来命名
2、2.3.0+ 添加前缀，只匹配兼容的之一
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

三、v-for

数组中： v-for="(item[, index]) in arrays" 或者 v-for="item of arrays"
对象中： v-for="(value[, key, index) in object"