學習要點：1.綁定 class 2.綁定 style

本節課我們來開始學習 Vue 的 class 和 style 綁定的方法。

一．綁定 class

1. v-bind:class 不但可以設置 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. 還有一種數組的方案，模版插值使用數組格式來定義；

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

4. 當然，如果有復雜的業務計算，那么直接交給計算屬性處理即可；

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', } } },

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

每日分享在學習過程中總結的學習經驗，學習筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學習為目的，每天閱讀一篇文章，了解身邊的技術，陪有夢想的人一起成長！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。