Vue.js 样式绑定(1)

demo 

   

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <title>Vue </title>
 6   <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 7   <style>
 8     .text-danger {
 9       background: blue;
10     }
11     .active {
12       width: 100px;
13       height: 100px;
14       background: antiquewhite;
15     }
16 
17   </style>
18 </head>
19 <body>
20 <div id="app">
21   <div v-bind:class="[activeClass, errorClass]"></div>
22 </div>
23 
24 <script>
25   new Vue({
26     el: '#app',
27     data: {
28      /* 后面的覆盖前面的样式*/
29       errorClass: 'text-danger',
30       activeClass: 'active'
31     }
32   })
33 </script>
34 </body>
35 </html>

效果：

 

2018-03-20   13:36:35

posted @ 2018-03-20 13:37  1点  阅读(110)  评论(0)  编辑  收藏  举报