Vue.js學習系列（三十）-- Vue.js樣式繫結（一）
阿新 • • 發佈：2019-01-31
class 與 style 是 HTML 元素的屬性，用於設定元素的樣式，我們可以用v-bind來設定樣式屬性。Vue.js v-bind 在處理 class 和 style 時，專門增強了它。表示式的結果型別除了字串之外，
1. Vue.js class
1.1 繫結一個屬性
在處理Vue.js class時可以為 v-bind:class 設定一個物件，從而動態的切換 class:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
<style type="text/css">
.active {
width: 100px;
height: 100px;
border: 1px solid red;
background: green
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{active:isActive}"></div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
isActive:true
}
})
</script>
</body>
</html>
執行結果為
在上述例子中將isActive設定為 true 顯示了帶有紅色邊框的綠色 div 塊，如果設定為 false 則不顯示。