vue_v-bind指令綁定class和style
v-bind指令的本質是： 動態(tài)更新html元素上的屬性值。
關于css樣式調用：
在HTML中我們可以使用class和id來選擇調用css樣式屬性。
class在css中被稱為“類”，在css樣式中以小寫的點，“.”來命名，如： .css5{屬性:屬性值}，而在html頁面里則以class="css5"來選擇調用，命名好的css又叫css選擇器。
我們知道一個html元素如：div、span, button等這些標簽元素，都可以設置一些屬性值，其中id是元素的名稱，可以供js或其它腳本程序來訪問該元素對象。
class 屬性規(guī)定元素的類名（classname）。class 屬性大多數(shù)時候用于指向樣式表中的類（class）。
即： 在class屬性中我們可以給一個html元素定義樣式。
vue綁定class的幾種方式
“
DOM元素經常會動態(tài)地綁定一些class類名或style樣式，我們可以使用v-bind指令來綁定class和style。
”
v-bind綁定class的幾種語法：
1.傳遞一個對象
<div v-bind:class="{ active: isActive }"></div>
2.傳遞一個數(shù)組
<div v-bind:class="[activeClass, errorClass]"></div>
傳遞一個對象
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
我們可以傳遞給v-bind:class一個對象作為參數(shù)，以動態(tài)地切換class。這個對象中，可以有多個class，而每個class存在與否將取決于數(shù)據(jù)屬性isActive的truthiness。 : class 內的表達式每項為真時，對應的類名就會加載。
示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:class="{'active': isActive, 'textDanger': hasError }">鋼七連</div>
</div>
<script>
var app = new Vue({
el: '#app', //綁定到哪一個元素上
data: {
isActive: true,
hasError: true
}
});
</script>
</body>
</html>
運行結果：
v-bind綁定class
