1. 绑定样式

  1. class样式
    写法:class="xxx" xxx可以是字符串、对象、数组。
  • 字符串写法适用于：类名不确定，要动态获取。
  • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
    数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
  1. style样式
    (1) :style="{fontSize: xxx}"其中xxx是动态值。
    (2) :style="[a,b]"其中a、b是样式对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>绑定样式</title>
  <style>
   .basic{
    width: 400px;
    height: 100px;
    border: 1px solid black;
   }
   
   .happy{
    border: 4px solid red;;
    background-color: rgba(255, 255, 0, 0.644);
    background: linear-gradient(30deg,yellow,pink,orange,yellow);
   }
   .sad{
    border: 4px dashed rgb(2, 197, 2);
    background-color: gray;
   }
   .normal{
    background-color: skyblue;
   }

   .atguigu1{
    background-color: yellowgreen;
   }
   .atguigu2{
    font-size: 30px;
    text-shadow:2px 2px 10px red;
   }
   .atguigu3{
    border-radius: 20px;
   }
  </style>
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
   <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

   <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
   <div class="basic" :class="classArr">{{name}}</div> <br/><br/>

   <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
   <div class="basic" :class="classObj">{{name}}</div> <br/><br/>

   <!-- 绑定style样式--对象写法 -->
   <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
   <!-- 绑定style样式--数组写法 -->
   <div class="basic" :style="styleArr">{{name}}</div>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false
  
  const vm = new Vue({
   el:'#root',
   data:{
    name:'taoying',
    mood:'normal',
    classArr:['atguigu1','atguigu2','atguigu3'],
    classObj:{
     atguigu1:false,
     atguigu2:false,
    },
    styleObj:{
     fontSize: '40px',
     color:'red',
    },
    styleObj2:{
     backgroundColor:'orange'
    },
    styleArr:[
     {
      fontSize: '40px',
      color:'blue',
     },
     {
      backgroundColor:'gray'
     }
    ]
   },
   methods: {
    changeMood(){
     const arr = ['happy','sad','normal']
     const index = Math.floor(Math.random()*3)
     this.mood = arr[index]
    }
   },
  })
 </script>
 
</html>

运行结果如下：