<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .basic{ width: 100px; height: 100px; border: 1px solid #00BFFF; } .one{ width: 200px; height: 100px; border: 1px solid #00BFFF; background-color: #5F9EA0; } .two{ width: 300px; height: 200px; border: 1px solid #00BFFF; background-color: cornflowerblue; } .th{ width: 300px; height: 300px; background-color: #008000; } </style> </head> <body> <div id="app"> 点击div切换class <!--绑定class-字符串写法;适用于:样式的类名不确定,需要动态指定--> <div class="basic" :class="a" @click="change">{{name}}</div> <!--绑定class-数组写法;适用于:要绑定的样式个数不确定,名字也不确定--> <div class="basic" :class="arr">{{name}}</div> <!--绑定class-对象写法;适用于:要绑定的样式个数确定,名字确定,但动态决定用不用--> <div class="basic" :class="obj">{{name}}</div> </div> <script type="text/javascript"> new Vue({ el:'#app', data:{ name:'666666', a:'one', arr:['one','two','th'], obj:{ one:false, two:false, th:false } }, methods:{ change(){ const arr = ['one','two','th'] // [0,1)*3 [0,3) var index = parseInt(Math.random()*3) console.log(index) this.name = arr[index] this.a = arr[index] } } }) </script> </body> </html>