v-bind class的应用 · vue

## v-bind可以操作class属性以下为代码案例，可以通过布尔值给标签加class 属性 ``` 语法规则：<div :class="{acolor:shuzi==1}" class="a" > VUE语法： var vue = new Vue({ el:"#app", data:{ shuzi:1 //判断条件 } }) ``` # 代码案例： ``` <!DOCTYPE html> <html lang="zh"> <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></title> <style> .a{ width: 100px; /* class a 的和高 */ height: 100px; } .acolor{ background-color: #FF0000; /* class acolor 的颜色 */ } </style> </head> <body> <div id="app" > <div :class="{acolor:shuzi==1}" class="a" >  </div> </div> </body> <script src="vue/vue.js"></script> <script type="text/javascript"> var vue = new Vue({ el:"#app", data:{ shuzi:1 //判断条件 } }) </script> </html> ```