我的 Vue.js 学习日记 （四） - v-bind:class / style 用法

上节回顾

上回看了模板语法、计算属性与监听器，今天继续往下看。

v-bind 与 class

v-bind:class有 4 种方式，分别是：
1.内联

<h3 v-bind:class="{ active : isActive,'text-danger' : hasError }">i am a h3</h3>

2.数据对象

<h3 v-bind:class="classDataObject">i am a h3</h3>

3.计算属性

<h3 v-bind:class="classComputedObject">i am a h3</h3>

4.数组

<h3 v-bind:class="[isActive, hasError]">i am a h3</h3>

无论是哪种方式绑定，依据都是一样的，表达式成立就输出，不成立就不输出

内联输出结果：

<h3 class="active">i am a h3</h3>

tip:可以通过在浏览器控制台修改app.hasError的值来观察h3标签class的变化

tip：组件中同样适用该绑定方式

v-bind 与 style

绑定style与绑定class基本一样：

1. 内联
2. 数据对象
3. 计算属性
4. 数组

都可以，例如绑定计算属性：

html:

<tr v-bind:style="size">

data:

data: { fontSize: 'fontSize: 20px;'}

computed:

computed:{
  size: function () {
    return this.fontSize
  }
}

输出：

<tr style="font-size: 20px;"></tr>

tip：有提到绑定浏览器引擎前缀的CSS属性时，vue会自动添加

小节

绑定class应该是很常用的一个指令，需要一些练习熟练掌握。

近些天身体有点不太好，等好了之后把拖拉的补回来。