1.class的对象绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./vue.js"></script> <title>Hello World</title> <style> .activated { color: red; } </style></head><div :class="{activated: isActivated}" @click="handleClick" id="app"> {{message}}</div>var app = new Vue({ el: '#app', data: { message: 'Hello World!!!', isActivated: false }, methods: { handleClick: function() { this.isActivated = !this.isActivated } } }) 2.class 数组绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./vue.js"></script> <title>Hello World</title> <style> .activated { color: aqua; } .activatedOne { color: red; } </style></head><div :class="[activated,activatedOne]" @click="handleClick" id="app"> {{message}} </div>var app = new Vue({ el: '#app', data: { message: 'Hello World!!!', activated: '', activatedOne: 'activatedOne' }, methods: { handleClick: function() { this.activated = this.activated === 'activated' ? "" : 'activated' this.activatedOne = this.activatedOne === 'activatedOne' ? "" : 'activatedOne' } } }) - 数组款式绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./vue.js"></script> <title>Hello World</title> <style> .activated { color: aqua; } .activatedOne { color: red; } </style></head><div :style="[styleObj]" @click="handleClick" id="app"> {{message}} </div>var app = new Vue({ el: '#app', data: { message: 'Hello World!!!', styleObj : { color: "black" } }, methods: { handleClick: function() { this.styleObj.color = this.styleObj.color==="black" ? "red" : "black" ; } } })