动态绑定class的几种方式 1.对象语法 行内或计算属性 <style> .static { width: 100px; height: 100px; background-color: #ccc; } .orange { border: 1px solid orange; } </style></head><body> <!-- 对象语法 --> <!-- <div id="example" class="static" v-bind:class="{'orange': isRipe, 'green': isNotRipe}"></div> --> <div id="example" class="static" v-bind:class="haha"></div></body> // 01class绑定方法1对象语法 var vm = new Vue({ el: "#example", data: { // isRipe: true, // isNotRipe: false age: 4, member: 999 }, computed: { haha: function() { return { 'orange': this.age > 3 ? true : false, 'green': this.member > 1000 ? true : false } } } }) 方法2数组语法 // 数组语法 <div id="example" class="static" v-bind:class="[class1, class2]"></div> var vm = new Vue({ el: "#example", data: { class1: 'orange', class2: 'green' } }) 方法3绑定行内样式 <!-- 对象语法 --> // <div id="app" v-bind:style="{color: color, fontSize: fontSize+'px' }">hello world</div> --> // <div id="app" v-bind:style="style">hello world</div> <div id="app" v-bind:style="haha">hello world</div> var vm = new Vue({ el: '#app', data: { // color: 'pink', // fontSize: 30 // style: { // color: 'pink', // fontSize: '30px' // } age: 4, member: 9000 }, computed: { haha : function() { return { color: this.age >3 ? orange: green, fontSize: this.member> 1000 ? '30px' :'10px' } } } })
转载于:https://www.cnblogs.com/zhtian/p/10053886.html