## class的對象綁定
```
<style>
.activated {
color: red;
}
</style>
<body>
<div id="app">
<div @click="change"
:class="{ activated : isActivated}"
>
hello
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isActivated: false,
},
methods: {
change: function () {
this.isActivated = !this.isActivated;
}
}
})
</script>
```
## 另一種方式
```
<style>
.activated {
color: red;
}
</style>
<body>
<div id="app">
<div @click="change"
:class="[activated]"
>
hello
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
activated: '',
},
methods: {
change: function () {
this.activated = this.activated === 'activated' ? '' : 'activated';
}
}
})
</script>
```
## style內聯樣式
這種方式也可以通過數組的方式.
```
<body>
<div id="app">
<div :style="styleObj"
@click="change"
>
hello
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
styleObj: {
color: 'black'
},
},
methods: {
change: function () {
this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black';
}
}
})
</script>
```
- 基礎
- MVVM
- 前端組件化
- VUE實例
- 生命周期
- 指令
- v-bind
- 模板語法
- 使用樣式
- class樣式
- 內聯樣式
- v-for
- v-if和v-show
- 過濾器
- 計算屬性
- 方法偵聽器
- 計算屬性的set和get
- watch,computed,methods對比
- 樣式綁定
- 條件渲染
- 組件
- 組件化和模塊化區別
- 使用組件的細節
- 父子組件數據傳遞
- 組件參數校驗與非props特性
- 給組件綁定原生事件
- 非父子組件間的傳值
- 在vue中使用插槽
- 作用域插槽
- 動態組件與v-once指令
- 動畫特效
- vue中CSS動畫原理
- 使用animate
- 同時使用過度和動畫
- JS動畫與velocity的結合
- 多個元素或組件的過度
- vue列表過度
- 動畫封裝
- 路由
- 什么是路由
- VUEX
- 概述
- 安裝
- 訪問倉庫