本文介紹了Vue的Class與Style綁定，分享給大家，具體如下：
綁定 HTML Class
對象語法
我們可以傳給 v-bind:class 一個對象，以動態地切換 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>在模板里的渲染結果為：
<div class="exp isNpc"></div>
我們也可以使用對象的方法來切換屬性
<div class="exp" v-bind:class="obj"></div><script> data:{ obj:{ newExp:false, npc:true } }</script>渲染結果和上面的一樣
數組語法
我們可以把一個數組傳給 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>
綁定內聯樣式
對象語法
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>數組語法
v-bind:style 的數組語法可以將多個樣式對象應用到一個元素上：
<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-
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
