3-6Vue中的样式绑定 · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的样式绑定</title> <script src="vue.js"></script> <style> .activated { color: red; } .activited_one { font-size: 30px; } </style> </head> <body> <div id="app">      <div @click="handleDivClick" :style="[styleObj,{fontSize:'20px'}]"> Hello World </div> </div> <script> var vm = new Vue({ el: '#app', data: { isActivated: false, activited: '', activitedOne: 'activited_one', styleObj: { color: "black" } }, methods: { handleDivClick: function () { // this.isActivated = !this.isActivated // this.activited = this.activited == 'activated' ? '' : 'activated'; this.styleObj.color = this.styleObj.color == 'black' ? 'red' : 'black'; } } }); </script> </body> </html> ~~~