這篇文章主要為大家展示了“Vue中Class與Style綁定的示例分析”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學習一下“Vue中Class與Style綁定的示例分析”這篇文章吧。
專注于為中小企業(yè)提供成都網(wǎng)站設計、做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)銀州免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了上千余家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
具體如下:
綁定 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:></div> <script> data:{ activeColor:"blue", fontSize:20 } </script>
使用對象語法的話,會看起來更加清晰
<div v-bind:></div> <script> data:{ obj:{ color:"#FFF", fontSize:"20px" } } </script>
數(shù)組語法
v-bind:style 的數(shù)組語法可以將多個樣式對象應用到一個元素上:
<div v-bind:></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-
以上是“Vue中Class與Style綁定的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站標題:Vue中Class與Style綁定的示例分析
網(wǎng)站網(wǎng)址:http://muchs.cn/article30/gecipo.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護、App設計、搜索引擎優(yōu)化、外貿(mào)建站、品牌網(wǎng)站制作、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)