Vue的Class與Style綁定的方法
本文介紹了Vue的Class與Style綁定，分享給大家，具體如下：
綁定 HTML Class
對(duì)象語(yǔ)法
我們可以傳給 v-bind:class 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class：
<style>
.exp{
border: 1px solid #ccc;
}
.forExp{
background: blue;
}
</style>
<div class="exp" v-bind:class="{newExp:isNewExp}"></div>
<script>
var exp=new Vue({
el:".exp".
data:{
isForExp:false
}
})
</script>
如上，我們先給 .exp 一個(gè)邊框，我們利用 v-bind 方法傳入一個(gè)新的 class 屬性 .newExp，設(shè)置一個(gè)藍(lán)色的背景顏色。當(dāng)我們?cè)诳刂婆_(tái)修改 .newExp 的屬性為 true 時(shí)，會(huì)給 div 添加一個(gè)藍(lán)色的背景顏色。
我們也可以傳入更多的屬性來(lái)切換多個(gè) class 。
<div class="exp" v-bind:class="{newExp:isExp,npc:isNpc}"></div>
<script>
data:{
isExp:false,
isNpc:true
}
</script>
在模板里的渲染結(jié)果為：
<div class="exp isNpc"></div>
我們也可以使用對(duì)象的方法來(lái)切換屬性
<div class="exp" v-bind:class="obj"></div>
<script>
data:{
obj:{
newExp:false,
npc:true
}
}
</script>
渲染結(jié)果和上面的一樣
數(shù)組語(yǔ)法
我們可以把一個(gè)數(shù)組傳給 v-bind:class，以應(yīng)用一個(gè) class 列表：
<div class="exp" v-bind:class="[newExp,oldExp]"></div>
<script>
data:{
newExp:"new",
oldExp:"old"
}
</script>
渲染為：
<div class="exp new old"></div>
要切換class，使用三元運(yùn)算符：
<div class="exp" v-bind:class="[act? newExp:oldExp]"></div>
<script>
data{
newExp:"new",
oldExp:"old",
act:true
}
<script>
act 為 true 時(shí)，添加 new ，為 false 時(shí)添加 old。
用在組件上
聲明一個(gè)組件：
Vue.component("my", {
template: '<p class="foo bar">Hi</p>'
})
然后在使用它的時(shí)候添加一些 class：
<my class="tip"></my>
最終渲染為
<p class="foo bar tip">Hi</p>
同樣的適用于綁定 HTML class:
<my v-bind:class="{ active: isActive }"></my>
當(dāng)active為true時(shí)，HTML 將被渲染成為：
<p class="foo bar active">Hi</p>
綁定內(nèi)聯(lián)樣式
對(duì)象語(yǔ)法
v-bind:style 的對(duì)象語(yǔ)法十分直觀(guān)——看著非常像 CSS，其實(shí)它是一個(gè) JavaScript 對(duì)象。 CSS 屬性名可以用駝峰式 (camelCase) 或 (配合引號(hào)的) 短橫分隔命名 (kebab-case)：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
data:{
activeColor:"blue",
fontSize:20
}
</script>
使用對(duì)象語(yǔ)法的話(huà)，會(huì)看起來(lái)更加清晰
<div v-bind:style="obj"></div>
<script>
data:{
obj:{
color:"#FFF",
fontSize:"20px"
}
}
</script>
數(shù)組語(yǔ)法
v-bind:style 的數(shù)組語(yǔ)法可以將多個(gè)樣式對(duì)象應(yīng)用到一個(gè)元素上：
<div v-bind:style="[style1,style2]"></div>
<script>
data:{
style1:{
color:"#666"
},
style2:{
background:"#b1b1b1"
}
}
</script>
自動(dòng)添加前綴
當(dāng) v-bind:style 使用需要特定前綴的 CSS 屬性時(shí)，如 transform，Vue.js 會(huì)自動(dòng)偵測(cè)并添加相應(yīng)的前綴。
Chrome 和 Safari : -webkit- IE : -ms- Firfox : -moz- Opera : -o-
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue圓環(huán)百分比進(jìn)度條組件功能的實(shí)現(xiàn)
在一些頁(yè)面設(shè)置進(jìn)度條效果給人一種很好的體驗(yàn)效果，今天小編教大家vue圓環(huán)百分比進(jìn)度條組件功能的實(shí)現(xiàn)代碼，代碼超級(jí)簡(jiǎn)單啊，感興趣的朋友快來(lái)看下吧2021-05-05
這篇文章主要介紹了如何獲取vue單文件自身源碼路徑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
關(guān)于vue3.0中的this.$router.replace({ path: ''/''})刷新無(wú)效果問(wèn)題
這篇文章主要介紹了關(guān)于vue3.0中的this.$router.replace({ path: '/'})刷新無(wú)效果問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
vue實(shí)現(xiàn)跨頁(yè)面定位錨點(diǎn)區(qū)域方式
這篇文章主要介紹了vue實(shí)現(xiàn)跨頁(yè)面定位錨點(diǎn)區(qū)域方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue中如何使用embed標(biāo)簽PDF預(yù)覽
這篇文章主要介紹了vue中如何使用embed標(biāo)簽PDF預(yù)覽，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue中動(dòng)態(tài)設(shè)置meta標(biāo)簽和title標(biāo)簽的方法
這篇文章主要介紹了vue中動(dòng)態(tài)設(shè)置meta標(biāo)簽和title標(biāo)簽的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue router帶參數(shù)頁(yè)面刷新或回退參數(shù)消失的解決方法
這篇文章主要介紹了vue router帶參數(shù)頁(yè)面刷新或回退參數(shù)消失的解決方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
vue通過(guò)指令(directives)實(shí)現(xiàn)點(diǎn)擊空白處收起下拉框
這篇文章主要介紹了vue通過(guò)指令(directives)實(shí)現(xiàn)點(diǎn)擊空白處收起下拉框，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
前端vue如何監(jiān)聽(tīng)對(duì)象或者數(shù)組某個(gè)屬性的變化詳解
這篇文章主要給大家介紹了關(guān)于前端vue如何監(jiān)聽(tīng)對(duì)象或者數(shù)組某個(gè)屬性的變化的相關(guān)資料,在Vue中你可以使用watch或者computed來(lái)監(jiān)聽(tīng)對(duì)象或數(shù)組某個(gè)屬性的變化,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
Vue組件簡(jiǎn)易模擬實(shí)現(xiàn)購(gòu)物車(chē)
這篇文章主要為大家詳細(xì)介紹了Vue組件簡(jiǎn)易模擬實(shí)現(xiàn)購(gòu)物車(chē)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12