1、class的对象绑定
//对应的css <style> .active { color: red; } </style> <!--html 对应的代码--> <div class="container" id="mytest"> <div class="jumbotron"> <!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理--> <div :class="{active:isactive,take:'take'}" @click="change">are you ok???</div> </div> </div> //javascript对应的代码 let VM = new Vue({ el: '#mytest', //对应:class里的值 data: {isactive: false}, methods: { change() { this.isactive = !this.isactive; } } })
2、class的数组绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="./lib/bootstrap.css"> <style> .active { color: red; } </style> <script src="./lib/vue.js"></script> <script> window.onload = function () { let VM = new Vue({ el: '#mytest', //对应:class里的值 data: {active: ''}, methods: { change() { this.active = this.active == '' ? 'active' : '' } } }) } </script> </head> <body> <div class="container" id="mytest"> <div class="jumbotron"> <!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理如下面的类test--> <div :class="[active,'test']" @click="change">are you ok???</div> </div> </div> </body> </html>
3、style的对象绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="./lib/bootstrap.css"> <style> .active { color: red; } </style> <script src="./lib/vue.js"></script> <script> window.onload = function () { let VM = new Vue({ el: '#mytest', data: { activeObj: { color: 'black', 'font-size': '20px' } }, methods: { change() { this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black'; } } }) } </script> </head> <body> <div class="container" id="mytest"> <div class="jumbotron"> <!--用style的对象来绑定样式--> <div :style="activeObj" @click="change">are you ok???</div> </div> </div> </body> </html>
4、style的数组绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="./lib/bootstrap.css"> <style> .active { color: red; } </style> <script src="./lib/vue.js"></script> <script> window.onload = function () { let VM = new Vue({ el: '#mytest', data: { activeObj: { color: 'black', 'font-size': '20px' }, testObj:{ 'text-decoration':'underline' } }, methods: { change() { this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black'; } } }) } </script> </head> <body> <div class="container" id="mytest"> <div class="jumbotron"> <!--用style的数组可以容纳多个对象,可以是vue里data的数据,也可以是行内数据,注意引号--> <div :style="[activeObj,testObj,{'font-weight':'bold'}]" @click="change">are you ok???</div> </div> </div> </body> </html>
5、通过委托事件绑定实现
通过methods里的方法,第一个传值是event,那么通过event.target 或者 event.currentTarget来操作DOM实现类的切换,可结合jquery