一.示例1
- 首先準備一些css樣式，在這個示例中我們將展示通過點擊動態(tài)修改顏色。
- vue對象中有兩個數(shù)據(jù)，changeColor和changeLength值都為false。
- 回到html文檔中，在div中綁定屬性，v-bind:class="{}"一個對象，changetheColor : changeColor。由于此時changeColor在vue中的值為false，所以changetheColor此時為無效屬性。
-
添加點擊事件@click，changeColor = !changeColor，點擊使得changeColor的值從false變?yōu)閠rue。
二. 示例2
- 在這里，我們給div綁定的屬性class="compClasses"，是以computed計算屬性傳進來的對象，此時由于changeColor和changeLength值都為false，所以changetheColor和changetheLength都是無效屬性。
- 同樣，創(chuàng)建兩個button，每個button都添加點擊事件，changeColor = !changeColor，changeLength = !changeLength。點擊使得changeColor，changeLength的值從false變?yōu)閠rue。
-
即可實現(xiàn)點擊按鈕，動態(tài)變換css樣式
