點擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識百科 - 正文

Vue的Class與Style綁定的方法

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:31:07

Vue的Class與Style綁定的方法

Vue的Class與Style綁定的方法:本文介紹了Vue的Class與Style綁定，分享給大家，具體如下：綁定 HTML Class 對象語法我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class： <style> .exp{ border: 1px solid #ccc; } .forExp{ backg

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀Vue的Class與Style綁定的方法:本文介紹了Vue的Class與Style綁定，分享給大家，具體如下：綁定 HTML Class 對象語法我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class： <style> .exp{ border: 1px solid #ccc; } .forExp{ backg

本文介紹了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，設(shè)置一個藍(lán)色的背景顏色。當(dāng)我們在控制臺修改 .newExp 的屬性為 true 時，會給 div 添加一個藍(lán)色的背景顏色。

我們也可以傳入更多的屬性來切換多個 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，以應(yīng)用一個 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>

當(dāng)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ù)組語法可以將多個樣式對象應(yīng)用到一個元素上：

<div v-bind:style="[style1,style2]"></div>
<script>
 data:{
 style1:{
 color:"#666"
 },
 style2:{
 background:"#b1b1b1"
 }
 }
</script>

自動添加前綴

當(dāng) v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測并添加相應(yīng)的前綴。

Chrome 和 Safari : -webkit-
IE : -ms-
Firfox : -moz-
Opera : -o-

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

Vue的Class與Style綁定的方法

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：綁定 VUE 綁定的

熱門焦點

Vue的Class與Style綁定的方法

Vue的Class與Style綁定的方法

Vue的Class與Style綁定的方法

最新推薦

猜你喜歡

熱門推薦