介紹

元素的class和style屬于attribute，所以可以用v-bind處理。而在v-bind用于classhestyle時，vue.js專門增強了一下，接受的表達式結果除了字符串，還要數組和對象。

綁定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' }]} }

對象語法：

//對象表達式 <div class="demo" :class="{'demo-red': isActive, 'demo-green': !isActive}"></div>data () {return {isActive: true,} } //綁定一個數據中的對象 <div class="demo" :class="demoClassInfo"></div>data () {return {isActive: true,demoClassInfo: {'demo-red': isActive,'demo-green': !isActive}} } //綁定一個計算屬性 <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,}} }

數組語法：

//三元表達式 <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'],} } //綁定一個計算屬性 <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)

對象語法：

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

數組語法：

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

總結

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

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