做一個(gè)需求：點(diǎn)擊網(wǎng)頁中的數(shù)據(jù)，點(diǎn)擊后硫狞，數(shù)據(jù)變成紅色，再點(diǎn)擊后晃痴，數(shù)據(jù)的顏色還原残吩。
方法1：class的對象綁定
借助class和對象的形式來做樣式和數(shù)據(jù)的綁定
<script src="./vue.js"></script>
<style>
.activated{
color: red
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="{activated: isActivated}"
>
Hello World
</div>
</div>
<script>
vm = new Vue({
el:"#app",
data:{
isActivated:false
},
methods:{
handleDivClick:function(){
this.isActivated = !this.isActivated;
}
}
})
</script>
</body>
和常規(guī)一樣，點(diǎn)擊頁面上的數(shù)據(jù)變色倘核，那么肯定綁定一個(gè)事件泣侮，即v-on:click。
這里新出來一個(gè)class屬性紧唱。例子中表示的是活尊，v-bind綁定一個(gè)class屬性，class屬性的名字叫activated漏益，class屬性有一個(gè)參數(shù)isActivated蛹锰，這個(gè)參數(shù)在實(shí)例中被輸入的值為false，當(dāng)為false時(shí)绰疤，class將不起作用铜犬。
再者，需要在頭部head標(biāo)簽內(nèi)增加style標(biāo)簽用來規(guī)定樣式轻庆，style內(nèi)輸入 .activated{color:red}
在style中癣猾，class就是以“.”開頭，activated是這個(gè)類的名字余爆，里面輸入樣式的內(nèi)容纷宇，是color：red。
這樣蛾方，body中的div完成了頁面顯示像捶，script完成了對數(shù)據(jù)的控制，頭部的style完成了如何渲染的工作转捕。
方法2：class與數(shù)組綁定
<script src="./vue.js"></script>
<style>
.activated{
color: red
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="[activatedOne]"
>
Hello World
</div>
</div>
<script>
vm = new Vue({
el:"#app",
data:{
activatedOne:""
},
methods:{
handleDivClick:function(){
this.activatedOne = "activated"
}
}
})
</script>
</body>
這里class與一個(gè)數(shù)組綁定作岖，數(shù)組內(nèi)有一個(gè)變量activatedOne，在實(shí)例data中五芝，activatedOne被置為空痘儡，當(dāng)點(diǎn)擊數(shù)據(jù)的時(shí)候，會(huì)激發(fā)handleDivClick函數(shù)枢步，函數(shù)內(nèi)將變量activatedOne從空設(shè)置為activated沉删。這樣渐尿，class數(shù)組內(nèi)的內(nèi)容就是activated，這個(gè)內(nèi)容在style中被體現(xiàn)矾瑰，顏色也就渲染了砖茸。
但是這樣做只能把顏色從黑色變?yōu)榧t色，無法再變回去殴穴。
若要變回去凉夯，代碼如下：
<script src="./vue.js"></script>
<style>
.activated{
color: red
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick"
:class="[activatedOne]"
>
Hello World
</div>
</div>
<script>
vm = new Vue({
el:"#app",
data:{
activatedOne:""
},
methods:{
handleDivClick:function(){
this.activatedOne = this.activatedOne ==="activated" ? "" : "activated"
}
}
})
</script>
</body>
其中methods做了改變：
這個(gè)函數(shù)包含了三元表達(dá)式（this.activatedOne ==="activated" ? "" : "activated"），三元表達(dá)式的結(jié)果將輸入給this.activatedOne采幌。當(dāng)this.activatedOne等于activated時(shí)劲够，點(diǎn)擊后將變成等于空；如果this.activatedOne不等于activated的時(shí)候休傍，點(diǎn)擊后征绎，將變成等于activated。這樣就實(shí)現(xiàn)了點(diǎn)擊后不斷變色的效果磨取。
