vue添加class樣式實(shí)例講解
更新時間：2019年02月12日 11:41:35 投稿：laozhang
在本文里我們給大家整理了關(guān)于vue添加class樣式實(shí)例，對此有興趣的朋友們可以學(xué)習(xí)參考下。
vue提供了一個動態(tài)添加class的v-bind:class（:class） 對象，可以使用：class進(jìn)行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實(shí)例。新建一個<script>標(biāo)簽，然后使用new Vue()創(chuàng)建實(shí)例。
代碼：
<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)文章
vue3中安裝使用vue-i18n實(shí)時切換語言且不用刷新
這篇文章主要介紹了vue3中安裝使用vue-i18n實(shí)時切換語言不用刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
不過 Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應(yīng)用，仍然需要了解大量 Vue 設(shè)計(jì)概念和操作技巧。這篇文章主要介紹了Vue.js 十五分鐘入門圖文教程,需要的朋友可以參考下2018-09-09
vue使用$store.commit() undefined報錯的解決
這篇文章主要介紹了vue使用$store.commit() undefined報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue3使用el-table組件實(shí)現(xiàn)分頁、多選以及回顯功能
這篇文章主要介紹了Vue3使用el-table組件實(shí)現(xiàn)分頁、多選以及回顯功能,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了Vue Router初始化路由信息的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以了解一下2023-11-11
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了vue-router路由懶加載和權(quán)限控制的相關(guān)資料2017-12-12
vue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue上傳文件formData上傳的解決全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別說明
這篇文章主要介紹了Vuex中this.$store.commit()和this.$store.dispatch()區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04