首頁 > web前端 > Vue.js > vuejs怎麼實作class切換

vuejs怎麼實作class切換

藏色散人
發布: 2021-11-04 15:06:17
原創
3584 人瀏覽過

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

vuejs怎麼實作class切換

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

vuejs怎麼實作class切換?

vue實作切換class類別:

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

vuejs怎麼實作class切換

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

vuejs怎麼實作class切換

vuejs怎麼實作class切換

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

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

,詳細如下圖

vuejs怎麼實作class切換

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

vuejs怎麼實作class切換

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

vuejs怎麼實作class切換

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

vuejs怎麼實作class切換

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

vuejs怎麼實作class切換

推薦學習:《

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板