样式绑定 · VUE

## class的对象绑定 ``` <style> .activated { color: red; } </style> <body> <div id="app"> <div @click="change" :class="{ activated : isActivated}" > hello </div> </div> <script> var vm = new Vue({ el: '#app', data: { isActivated: false, }, methods: { change: function () { this.isActivated = !this.isActivated; } } }) </script> ``` ## 另一种方式 ``` <style> .activated { color: red; } </style> <body> <div id="app"> <div @click="change" :class="[activated]" > hello </div> </div> <script> var vm = new Vue({ el: '#app', data: { activated: '', }, methods: { change: function () { this.activated = this.activated === 'activated' ? '' : 'activated'; } } }) </script> ``` ## style内联样式这种方式也可以通过数组的方式. ``` <body> <div id="app"> <div :style="styleObj" @click="change" > hello </div> </div> <script> var vm = new Vue({ el: '#app', data: { styleObj: { color: 'black' }, }, methods: { change: function () { this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black'; } } }) </script> ```