vuejs怎麼實作class切換

vuejs實作class切換的方法：1、建立一個html網頁基礎結構；2、引入vue.js；3、初始化一個vue實例；4、給按鈕綁定一個事件@click；5、創建要切換顏色的類別cgcolor；6、透過綁定calss用active來判斷即可。

本文操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vuejs怎麼實作class切換?

vue實作切換class類別：

第一步，為了方便我們寫程式碼，我將使用html編輯器sublime-text進行程式碼的編寫，詳細如下圖

#第二步，建立一個html網頁基礎結構，然後想要使用vue .js這個框架，我們先引入vue.js，可以去官網下載或引用線上的vue.js庫，詳細如下圖

##第三步，引入vue.js以後，我們簡單說下我們要實現的例子的效果，

（有一個黑色的盒子，點擊按鈕黑色盒子變藍色，再點擊一次盒子，盒子變回黑色，然後如此循環。）詳細的程式碼如下

，詳細如下圖

第三步，創建好以後，我們初始化一個vue實例，詳細程式碼以及效果如下圖

第五步，我們給按鈕綁定一個事件@click，再然後把事件方法寫在methods裡面，詳細如下圖片

第六步，我們建立了一個要切換顏色的類別cgcolor，然後在data裡面新建一個狀態標籤active，然後透過綁定calss用active來判斷，詳細如下圖

第七步，最終效果如下，點擊一下盒子變藍色，再點變黑色，詳細如下圖

推薦學習：《

最新的5個vue.js影片教學精選》

以上是vuejs怎麼實作class切換的詳細內容。更多資訊請關注PHP中文網其他相關文章！