Vuejs学习笔记(三)

发表于 | 阅读次数: |

Class 与 Style 绑定

数据绑定的常见需求是操作元素的 class 列表和它的内联样式，我们用 v-bind 处理它们的时候只需要计算出表达式最终的字符串即可，但是，字符串的拼接容易出错；最后，vuejs 中在 v-bind 用于 class 和 style 时，vuejs 对它进行了增强，表达式的结果类型除了字符串之外，还可以是对象或数组。

(一).绑定 HTML Class

绑定 class 有两种方法，一种是用 Mustache 标签绑定 class，另一种是用 v-bind：class 写，在编写代码的时候尽量只选择一种，避免两种混用。

对象语法

1.我们可以传给 v-bind:class 一个对象，这样可以动态的切换 class；除此之外，v-bind:class 指令可以和普通的 class 特性共存：

1
2
3
4
5
6
7
8
9
<div class="static" v-bind:class="{'class-a':isA,'class-b':isB}"></div>

data:{

    isA:true,

    isB:false

}

如下图所示：

2.也可以直接给 v-bind:class 绑定数据里的一个对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
<div v-bind:class="classObject"></div>

data:{

    classObject:{

        'class-a':true,

        'class-b':false

    }

}

如下图所示：

数组语法

3.除了使用上面的两种方法外，还可以把一个数组传给 v-bind:class，以应用一个 class 列表，只要是在这个数据里面的都会应用到 class 上；

1
2
3
4
5
6
7
8
9
<div v-bind:class"[classA,classB]"></div>

data: {

    classA:'class-a',

    classB:'class-b'

}

如下图所示：

数组语法可以直接应用一组 class 列表，但是有时候只需要其中一个，那么我们在选择的时候可以使用三元表达式进行判断添加。

(二).绑定内联样式

1.v-bind:style 的对象语法很直观，与 CSS 差不多；但是，它是一个 JavaScript 对象，css 属性命名可以用驼峰式或短横线分割式。但是在使用时尽量只用一种，不要混用。

1
2
3
4
5
6
7
8
9
10
11
<div v-bind:style="{color:activeColor,fontSize:fontSize+'px',textAlign:textAlign}"

data: {

    activeColor:'red',

    fontSize:20,

    textAlign:'center'

}

如下图所示：

2.这种方法虽然能够直接在标签上绑定我们想要的样式信息，如果样式一多就显得格外混乱，因此我们能够直接在样式上绑定一个对象，这样将所有的样式信息写在对象里面，让标签看着更清晰；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div v-bind:style="styleObject"></div>

data: {

    styleObject: {

        color:'red',

        fontSize:'20px',

        textAlign:'center'

    }

}

如下图所示：

除上面的方法外，还要给标签添加更多不一样的样式时，可以利用数组语法将多个样式对象应用到一个元素上；

1
<div v-bind:style="[styleObject1,styleObject2]" />

(三).条件渲染

1.v-if——v-else

写法：

1
2
3
<h1 v-if="ok">成功执行</h1>

<h1 v-else>失败执行</h1>