點擊二白夫人

不許錯過我

v-bind動態綁定class

????

操作軟件:Webstorm

插件：vue.js ?//從官網下載https://cn.vuejs.org/v2/guide/installation.html

v-bind

作用：動態綁定屬性

縮寫(語法糖)：：

例如

等同于

v-bind用于綁定一個或多個屬性值，或者向另一個組件傳遞props值

1、v-bind的基本使用

/span>html>lang="en">charset="UTF-8">Titleid="app">{{message}}v-bind:src="imgURL" alt="">v-bind:href="aHref">百度href="http://www.baidu.com">百度一下

2、v-bind動態綁定class(對象語法)

語法格式：

?>

//動態綁定寫法? { }大括號里面的內容表示對象? 變量放在data：{} 里面寫了

{{message}}

/span>html>lang="en">charset="UTF-8">Title.active {
????? color: red
??? }
? id="app">

v-bind:class = "{active:isActive,line: isLine}">{{message}}

v-on:click="btnClick">按鈕

注明：? =！表示取反符號??

代碼解釋：這里的類名1和類名2分別是active和line，變量是isAcitve和isLine，isAcitve和isLine的值放在data里面實現。

(點擊按鈕字體顏色會轉換)

也可以把

{{message}}

換成

{{message}}

? 就需要在后面調用一個getClass方法(寫在methods里面)

getClasses: function () {return {active:this.isActive,line: this.isLine}
}

3、v-bind動態綁定class(數組語法)

用得比較少?

數組用[ ]

/span>html>lang="en">charset="UTF-8">id="app">

v-bind:class="[active, line]">{{message}}

v-bind:class="getClasses()">

小總結：

v-bind用于綁定一個或多個屬性值；v-bind綁定class(類)有兩種形式：1、對象形式，用{ };2、數組形式，用[ ]；數組形式用的比較少，不靈活。

總結

以上是生活随笔為你收集整理的vue :class 动态绑定样式_Notes04vbind动态绑定class的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。