vue class与style绑定

介绍

元素的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绑定的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。