vue添加class樣式實例講解
更新時間：2019年02月12日 11:41:35 投稿：laozhang
在本文里我們給大家整理了關(guān)于vue添加class樣式實例，對此有興趣的朋友們可以學(xué)習(xí)參考下。
vue提供了一個動態(tài)添加class的v-bind:class（:class） 對象，可以使用：class進行clas動態(tài)的切換。案例中將通過使用:class設(shè)置 字體為紅色。
1、新建一個html代碼頁面。
2、在html代碼頁面創(chuàng)建一個<div>同時添加id為app，并添加一段文本
3、引入vue.js文件。使用<scrtip>標(biāo)簽引入vue文件。
4、創(chuàng)建vue實例。新建一個<script>標(biāo)簽，然后使用new Vue()創(chuàng)建實例。
代碼：
<script>
var app = new Vue({
el:"#app"
})
</script>
5、創(chuàng)建設(shè)置字體為紅色的red樣式。在<title>標(biāo)簽后面創(chuàng)建一個<style>標(biāo)簽，然后設(shè)置字體為紅色的red樣式。
代碼：
<style>
.red{
color: red;
}
</style>
6、使用:class添加red類樣式。在<div>標(biāo)簽里面添加 :class="{red:true}"。
7、保存html代碼后使用瀏覽器打開，即可看到字體已經(jīng)變?yōu)榱思t色
相關(guān)文章
本文主要介紹了Element?table?上下移需求的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue3+element?plus實現(xiàn)側(cè)邊欄過程
這篇文章主要介紹了vue3+element?plus實現(xiàn)側(cè)邊欄過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3如何通過ESLint校驗代碼是否符合規(guī)范詳解
ESLint可以靈活設(shè)置規(guī)則,也發(fā)布了很多公開的規(guī)則集,下面這篇文章主要給大家介紹了關(guān)于Vue3如何通過ESLint校驗代碼是否符合規(guī)范的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況
這篇文章主要介紹了vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
今天小編就為大家分享一篇關(guān)于vue中過濾器filter的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue-meta實現(xiàn)router動態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實現(xiàn)router動態(tài)設(shè)置meta標(biāo)簽,實現(xiàn)思路非常簡單內(nèi)容包括mata標(biāo)簽的特點和mata標(biāo)簽共有兩個屬性，分別是http-equiv屬性和name屬性，本文通過實例代碼給大家詳細(xì)講解需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue項目API接口get請求傳遞參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue使用js-file-download完成導(dǎo)出功能實例
這篇文章主要介紹了vue使用js-file-download完成導(dǎo)出功能實例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue后臺返回格式為二進制流進行文件的下載方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue+webpack實現(xiàn)異步加載三種用法示例詳解
這篇文章主要介紹了vue+webpack實現(xiàn)異步加載的三種用法，文中給大家提到了vue+webpack實現(xiàn)異步組件加載的代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04