vue样式的动态绑定

时间:2023-01-30 00:03:55

true显示样式,flase不显示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue的样式绑定</title>
 6     <style type="text/css">
 7     .active{
 8         background-color: gold;
 9         color:blue;
10     }
11 
12     </style>
13     <script type="text/javascript" src="./js/vue.js"></script>
14     <script type="text/javascript">
15 
16     window.onload = function(){
17 
18         var app = new Vue({
19             el:"#a",
20             data:{
21                 //激活 false
22                 isactive:true
23             }
24 
25         });
26     }
27 
28     </script>
29 
30 </head>
31 <body>
32     
33     <div id="a">人生最棒的是不后悔
34     <div v-bind:class="{ active:isactive }" style="width: 200px">
35     人生最难的是不留遗憾
36     </div>
37     </div>
38 
39 </body>
40 </html>