Vue 基礎精講(三)
阿新 • • 發佈：2018-12-04
Class 與 Style 繫結
繫結 HTML Class
- 物件語法
對div中的 class 進行繫結後， activated 這個 class 存在與否將取決於資料屬性 isActivated 的 truthiness，給div設定一個點選事件，控制 class 屬性的顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> - 陣列語法
我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表
...
<div id="app">
<div @click="handleDivClick"
:class="[activated, activatedOne]"
>hello world</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
activated: "",
activatedOne: "activated-one"
},
methods: {
handleDivClick: function() {
this.activated = this.activated === "activated" ? "" : "activated";
}
}
})
</script>
...
繫結內聯樣式
v-bind:style 的物件語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 物件。CSS 屬性名可以用駝峰式或短橫線分隔 (記得用單引號括起來) 來命名，經常使用三元表示式會使程式碼顯得更優雅哦
...
<div id="app">
<!-- <div :style="styleObj" --> // 物件語法
<div :style="[styleObj, {fontSize: '20px'}]"
@click="handleDivClick">hello world</div> // 陣列語法
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
styleObj: {
color: "black"
}
},
methods: {
handleDivClick: function() {
this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
}
}
})
</script>
...