介紹

元素的class和style屬于attribute，所以可以用v-bind處理。而在v-bind用于classhestyle時(shí)，vue.js專門增強(qiáng)了一下，接受的表達(dá)式結(jié)果除了字符串，還要數(shù)組和對(duì)象。

綁定class

字符串語法：

<div v-for="(item, index) in list" :class="'demo' + index"></div><div v-for="(item, index) in lists"><i :class="item.icon"></i> </div>data () {return {list: [],lists: [{ icon: 'icon-like' },{ icon: 'icon-new' },{ icon: 'icon-share' }]} }

對(duì)象語法：

//對(duì)象表達(dá)式 <div class="demo" :class="{'demo-red': isActive, 'demo-green': !isActive}"></div>data () {return {isActive: true,} } //綁定一個(gè)數(shù)據(jù)中的對(duì)象 <div class="demo" :class="demoClassInfo"></div>data () {return {isActive: true,demoClassInfo: {'demo-red': isActive,'demo-green': !isActive}} } //綁定一個(gè)計(jì)算屬性 <div class="demo" :class="demoClassInfo"></div>data () {return {count: 0,} } cmputed: {demoClassInfo() {return {'demo-green': count > 0 && count <= 100 ? true : false,'demo-red': count > 100 ? true : false,}} }

數(shù)組語法：

//三元表達(dá)式 <div class="demo" :class="[ isActive ? 'demo-red' : 'demo-green' ]"></div>data () {return {isActive: true,} } <div class="demo" :class="[demoClass1, demoClass2]"></div>data () {return {demoClass1: 'demo-color',demoClass2: 'demo-size',} } <div class="demo" :class="demoClassList"></div>data () {return {demoClassList: [ 'demo-color', 'demo-size'],} } //綁定一個(gè)計(jì)算屬性 <div class="demo" :class="demoClassInfo"></div>data () {return {count: 0,} } cmputed: {demoClassInfo() {return [count > 0 && count <= 100 ? 'demo-green' : '',count > 100 ? 'demo-red' : '']} }

綁定style

css語法可以使用駝峰式（camelCase）、短橫分隔命名(kabab-case)

對(duì)象語法：

<div class="demo" :style="color: demoColor, fontSize: demoFontSize / 100 + ''rem'"></div>data () {return {demoColor: 'red',fontSize: 24} } <div class="demo" :style="demoStyleInfo"></div>data () {return {demoStyleInfo: {demoColor: 'red',fontSize: '0.24rem'}} }

數(shù)組語法：

<div class="demo" :style="[demoColor, demoSize]"></div>data () {return {demoStyleInfo: {demoColor: 'color: red',demoSize: 'fontSize: 0.24rem'}} }

總結(jié)

以上是生活随笔為你收集整理的vue class与style绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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