vue中样式-class

小咪咪 2022-02-21 09:17 249阅读 0赞

> <!DOCTYPE html>  
> <html lang="en">
> 
> <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>Document</title>  
>   <script src="./lib/vue-2.4.0.js"></script>  
>   <style>  
>     .red \{  
>       color: red;  
>     \}
> 
>     .thin \{  
>       font-weight: 200;  
>     \}
> 
>     .italic \{  
>       font-style: italic;  
>     \}
> 
>     .active \{  
>       letter-spacing: 0.5em;  
>     \}  
>   </style>  
> </head>
> 
> <body>  
>   <div id="app">  
>     
> 
>       
>     
> 
>       
>     
> 
>       
>     
> 
>       
>     <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1>
> 
>   
>   </div>
> 
>   <script>  
>     // 创建 Vue 实例，得到 ViewModel  
>     var vm = new Vue(\{  
>       el: '\#app',  
>       data: \{  
>         flag: true,  
>         classObj: \{ red: true, thin: true, italic: false, active: false \}  
>       \},  
>       methods: \{\}  
>     \});  
>   </script>  
> </body>
> 
> </html>