第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

 

 1 DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <title>Documenttitle>
 8     
 9     <script src=" https://cdn.jsdelivr.net/npm/vue">script>   
10     <style>
11       .red{
12         color: red;
13       }
14       .thin{
15         font-weight: 200;
16       }
17       .italic{
18         font-style: italic;
19       }
20       .active{
21         letter-spacing: 0.5em;
22       }
23     style>
24   head>
25 
26   <body>
27       <div id="app">
28         
29 
30        
31         
32       
33       
34     
35 
36         
37        
38 
39         
40        <h1 :class="{red:true,thin:true,italic:false,active:false}">这是一个很大很大的H1,大到你无法想象!!!h1>
41 
42        <h1 :class="classObj">这是一个很大很大的H1,大到你无法想象!!!h1>
43 
44     div>
45       <script>
46           //创建 Vue 实例,得到 ViewModel
47           var vm =  new Vue({
48               el:'#app',
49         data:{
50           flag:true,
51           classObj:{red:true,thin:true,italic:false,active:false}
52         },
53         methods:{}
54           });
55       script>
56   body>
57 html>

 

转载于:https://www.cnblogs.com/songsongblue/p/10988169.html

你可能感兴趣的:(第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式)