vue09-class物件樣式繫結
阿新 • • 發佈：2018-12-11
首先看程式碼
<!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8" /> <title>Hello world</title> <script src="vue.js"></script> <style> .activated { color: red; } </style> </head> <body> <div id="root"> <!-- class物件繫結 --> <div @click="handleDivClick" :class="{activated: isActivated}">HelloWorld</div> </div> <script> var vm = new Vue({ el: "#root", data: { isActivated: false }, methods: { handleDivClick: function () { this.isActivated = !this.isActivated; } } }) </script> </body> </html>
當isActivated屬性為ture時，class與樣式activated繫結，當為false時，不繫結。
click事件為切換繫結與不繫結