學(xué)習(xí)要點(diǎn)：1.綁定 class 2.綁定 style

本節(jié)課我們來開始學(xué)習(xí) Vue 的 class 和 style 綁定的方法。

一．綁定 class

1. v-bind:class 不但可以設(shè)置 class 屬性，還可以和元素本身的 class 共存；

class="static"?v-bind:class="{active:isActice,bold:isBold}">第一種</div>const dataObj={ isActice:false, isBold:false, };

2. 上面的方案給模版插值帶來一定的壓力，我們可以直接定義在視圖模型端；

class="static" v-bind:class="isClass">第二種</div>const?dataObj={ isClass:{ active:true, bold:true????????}, };

3. 還有一種數(shù)組的方案，模版插值使用數(shù)組格式來定義；

class="static" v-bind:class="[active,bold]">第三種</div>const?dataObj={ active:'active', bold:'bold',?};

4. 當(dāng)然，如果有復(fù)雜的業(yè)務(wù)計算，那么直接交給計算屬性處理即可；

class="static" v-bind:class="classObject">第四種</div>computed: { classObject(){ return { active:true, bold:true } }},

二．style 綁定

1. style 綁定和 class 基本上是一樣的，可以和已有的樣式共存，相同的覆蓋；

<div style="font-size: 20px; color: red;" v-bind:style="{color:activeCole}">第一種div>const dataObj={ activeCole:'green', };<div?style="font-size:?20px;?color:?red;"?v-bind:style="styleObject">第二種div>const?dataObj={ styleArray:{ color:'green', fontWeight:'bold', } };<div?style="font-size:?20px;?color:?red;"?v-bind:style="[styleArray]">第三種div>const?dataObj={ styleArray:{ color:'green', fontWeight:'bold', } };<div style="font-size: 20px; color: red;" v-bind:style="styleComputed">第四種div>computed: { styleComputed(){ return { color:'green', fontWeight:'bold', } } },

如果您覺得有用，記得在下方點(diǎn)贊、關(guān)注、留言，小編會定期奉上更多的驚喜哦，您的打賞支持才是小編繼續(xù)努力的動力，么么噠。

每日分享在學(xué)習(xí)過程中總結(jié)的學(xué)習(xí)經(jīng)驗(yàn)，學(xué)習(xí)筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學(xué)習(xí)為目的，每天閱讀一篇文章，了解身邊的技術(shù)，陪有夢想的人一起成長！

總結(jié)

以上是生活随笔為你收集整理的vue清除绑定的class_vue 的 class 和 style 绑定的方法【05】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。