上节回顾

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

v-bind 与 class

v-bind:class4 种方式,分别是:
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应该是很常用的一个指令,需要一些练习熟练掌握。

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

本文固定链接: http://www.js-code.com/vue-js/vue-js_25963.html