首先抛出一个问题，在vue如何通过点击事件来改变文字的样式～～
简单的代码演示！带出class的用法-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../node_modules/vue/dist/vue.js"></script> <style> .x{ color: red; } .y{ font-size: 40px; } .z{ background-color: purple; } </style> </head> <body> <div id="app"> <button @click='changeColor'>change color</button> <button @click='changeBgColor'>change backgroundColor</button> <button @click='changeSize'>change fontsize</button> <!-- 业务要求：通过点击按钮改变该字体的大小 --> <p :class="{x:isColor,z:isBgColor,y:isFontsize}">this is demo !</p> </div> <script> const vm = new Vue({ el:'#app', data:{ isColor:false, isBgColor:false, isFontsize:false }, methods:{ // changecolor changeColor(){ this.isBgColor = !this.isColor }, // changeBgcolor changeBgColor(){ this.isBgColor = !this.isBgColor }, // changeFontsize changeSize(){ this.isFontsize = !this.isFontsize } } }) </script> </body> </html>
通过这个代码是否懂了class绑定的基本用法？具体用法可以参考官方文档：