Vue的Class與Style綁定的方法
本文介紹了Vue的Class與Style綁定，分享給大家，具體如下：
綁定 HTML Class
對象語法
我們可以傳給 v-bind:class 一個對象，以動態(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 一個邊框，我們利用 v-bind 方法傳入一個新的 class 屬性 .newExp，設置一個藍色的背景顏色。當我們在控制臺修改 .newExp 的屬性為 true 時，會給 div 添加一個藍色的背景顏色。
我們也可以傳入更多的屬性來切換多個 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>
我們也可以使用對象的方法來切換屬性
<div class="exp" v-bind:class="obj"></div>
<script>
data:{
obj:{
newExp:false,
npc:true
}
}
</script>
渲染結(jié)果和上面的一樣
數(shù)組語法
我們可以把一個數(shù)組傳給 v-bind:class，以應用一個 class 列表：
<div class="exp" v-bind:class="[newExp,oldExp]"></div>
<script>
data:{
newExp:"new",
oldExp:"old"
}
</script>
渲染為：
<div class="exp new old"></div>
要切換class，使用三元運算符：
<div class="exp" v-bind:class="[act? newExp:oldExp]"></div>
<script>
data{
newExp:"new",
oldExp:"old",
act:true
}
<script>
act 為 true 時，添加 new ，為 false 時添加 old。
用在組件上
聲明一個組件：
Vue.component("my", {
template: '<p class="foo bar">Hi</p>'
})
然后在使用它的時候添加一些 class：
<my class="tip"></my>
最終渲染為
<p class="foo bar tip">Hi</p>
同樣的適用于綁定 HTML class:
<my v-bind:class="{ active: isActive }"></my>
當active為true時，HTML 將被渲染成為：
<p class="foo bar active">Hi</p>
綁定內(nèi)聯(lián)樣式
對象語法
v-bind:style 的對象語法十分直觀——看著非常像 CSS，其實它是一個 JavaScript 對象。 CSS 屬性名可以用駝峰式 (camelCase) 或 (配合引號的) 短橫分隔命名 (kebab-case)：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
data:{
activeColor:"blue",
fontSize:20
}
</script>
使用對象語法的話，會看起來更加清晰
<div v-bind:style="obj"></div>
<script>
data:{
obj:{
color:"#FFF",
fontSize:"20px"
}
}
</script>
數(shù)組語法
v-bind:style 的數(shù)組語法可以將多個樣式對象應用到一個元素上：
<div v-bind:style="[style1,style2]"></div>
<script>
data:{
style1:{
color:"#666"
},
style2:{
background:"#b1b1b1"
}
}
</script>
自動添加前綴
當 v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測并添加相應的前綴。
Chrome 和 Safari : -webkit- IE : -ms- Firfox : -moz- Opera : -o-
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue如何從后臺下載.zip壓縮包文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
示例vue 的keep-alive緩存功能的實現(xiàn)
這篇文章主要介紹了示例vue 的keep-alive緩存功能的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue3 學習筆記之a(chǎn)xios的使用變化總結(jié)
本篇文章主要旨在幫助正在學vue3或者準備學vue3的同學了解網(wǎng)絡請求axios該如何使用，防止接觸了一點點vue3的同學會有個疑問。有興趣的小伙伴可以關注一下2021-11-11
vuex數(shù)據(jù)持久化的兩種實現(xiàn)方案
在vuex的時候刷新以后里面存儲的state就會被瀏覽器釋放掉,因為我們的state都是存儲在內(nèi)存中的,所以一刷新頁面就會把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問題,這篇文章主要給大家介紹了關于vuex數(shù)據(jù)持久化的兩種實現(xiàn)方案,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue實現(xiàn)商品加減計算總價的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
組件是?vue.js?最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用，這篇文章主要介紹了Vue組件間傳值的實現(xiàn)2022-09-09
在Vue3.x中實現(xiàn)類似React.lazy效果的方法詳解
React 的 React.lazy 功能為組件懶加載提供了原生支持,允許開發(fā)者將組件渲染推遲到實際需要時再進行,雖然 Vue3.x 沒有一個直接對應的 lazy 函數(shù),但我們可以通過動態(tài)導入和 defineAsyncComponent 方法來實現(xiàn)類似的效果,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了詳解vue項目接入微信JSSDK的坑,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了記錄一個van-list不斷onLoad加載的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue路由傳參刷新后數(shù)據(jù)丟失問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03