vue添加class樣式實(shí)例講解

vue提供了一個(gè)動(dòng)態(tài)添加class的v-bind:class（:class） 對(duì)象，可以使用：class進(jìn)行clas動(dòng)態(tài)的切換。案例中將通過(guò)使用:class設(shè)置 字體為紅色。

1、新建一個(gè)html代碼頁(yè)面。

2、在html代碼頁(yè)面創(chuàng)建一個(gè)<div>同時(shí)添加id為app，并添加一段文本

3、引入vue.js文件。使用<scrtip>標(biāo)簽引入vue文件。

4、創(chuàng)建vue實(shí)例。新建一個(gè)<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)建一個(gè)<style>標(biāo)簽，然后設(shè)置字體為紅色的red樣式。

代碼：

<style>

.red{

color: red;

}

</style>

6、使用:class添加red類(lèi)樣式。在<div>標(biāo)簽里面添加 :class="{red:true}"。

7、保存html代碼后使用瀏覽器打開(kāi)，即可看到字體已經(jīng)變?yōu)榱思t色

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com