vue 繫結class、v-bind:style(物件語法、陣列語法)
阿新 • • 發佈：2022-03-05
繫結 HTML Class
我們可以傳給 v-bind:class 一個物件，以動態地切換 class：
內聯樣式在模板裡
1 <div id="div1" :class="{active: isActive, 'text-danger': hasError}"></div>
2 <script type="text/javascript">
3 var vm1 = new Vue({
4 el: "#div1",
5 data: {
6 isActive: true,
7 hasError: true,
8 }
9 })
10 </script>
11
12
13
14 // 預覽
15 <div id="div1" class="active text-danger"></div>內聯樣式不在模板裡
1 <div id="div2" :class="class_obj"></div>
2
3 <script type="text/javascript">
4 var vm2 = new Vue({
5 el: "#div2",
6 data: {
7 class_obj: {
8 isActive: true,
9 hasError: true,
10 }
11 }
12 })
13 </script>
14 ————————————————
15 // 預覽
16 <div id="div2" class="isActive hasError"></div>繫結返回物件的計算屬性
1 <div id="div3" v-bind:class="classObject"></div>
2
3 <script type="text/javascript">
4 var vm3 = new Vue({
5 el: "#div3",
6 data: {
7 isActive: true,
8 error: true
9 },
10 computed: {
11 classObject: function () {
12 return {
13 active: this.isActive && this.error,
14 'text-danger': this.error
15 }
16 }
17 }
18 })
19 </script>
20 ————————————————
21
22 // 預覽
23
24 <div id="div3" class="active text-danger"></div> 陣列語法
我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：
class 列表
1 <div id="div4" v-bind:class="[activeClass, errorClass]"></div>
2 <script type="text/javascript">
3 new Vue({
4 el: "#div4",
5 data: {
6 activeClass: 'active',
7 errorClass: 'text-danger'
8 }
9 })
10 </script>
11 ————————————————
12
13 // 預覽
14
15 <div id="div4" class="active text-danger"></div>
class 列表使用三元表示式
如果你也想根據條件切換列表中的 class，可以用三元表示式：
1 <div id="div5" v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
2 <script type="text/javascript">
3 new Vue({
4 el: "#div5",
5 data: {
6 isActive: true,
7 activeClass: 'active',
8 errorClass: 'text-danger'
9 }
10 })
11 </script>
12 ————————————————
13
14 // 預覽
15
16 <div id="div5" class="active text-danger"></div>
class 列表使用物件語法
1 <div id="div6" v-bind:class="[{ active: isActive }, errorClass]"></div>
2 <script type="text/javascript">
3 new Vue({
4 el: "#div6",
5 data: {
6 isActive: true,
7 errorClass: 'text-danger'
8 }
9 })
10 </script>
11 ————————————————
12
13 // 預覽
14
15 <div id="div6" class="active text-danger"></div>
class 綜合練習
1 <style>
2 .red {
3 color: red;
4 }
5
6 .thin {
7 font-weight: 200;
8 }
9
10 .italic {
11 font-style: italic;
12 }
13
14 .active {
15 letter-spacing: 0.5em;
16 }
17 </style>
18
19
20
21 <body>
22 <div id="app">
23 <h1 class="red thin">這是一個很大很大的H1，大到你無法想象！！！</h1>
24
25 <!-- 第一種使用方式，直接傳遞一個數組，注意： 這裡的 class 需要使用 v-bind 做資料繫結 -->
26 <h1 :class="['thin', 'italic']">這是一個很大很大的H1，大到你無法想象！！！</h1>
27
28 <!-- 在陣列中使用三元表示式 -->
29 <h1 :class="['thin', 'italic', flag?'active':'']">這是一個很大很大的H1，大到你無法想象！！！</h1>
30
31 <!-- 在陣列中使用 物件來代替三元表示式，提高程式碼的可讀性 -->
32 <h1 :class="['thin', 'italic', {'active':flag} ]">這是一個很大很大的H1，大到你無法想象！！！</h1>
33
34 <!-- 在為 class 使用 v-bind 繫結 物件的時候，物件的屬性是類名，由於 物件的屬性可帶引號，也可不帶引號，所以 這裡我沒寫引號； 屬性的值 是一個識別符號 -->
35 <h1 :class="classObj">這是一個很大很大的H1，大到你無法想象！！！</h1>
36
37
38 </div>
39
40 <script>
41 // 建立 Vue 例項，得到 ViewModel
42 var vm = new Vue({
43 el: '#app',
44 data: {
45 flag: true,
46 classObj: { red: true, thin: true, italic: false, active: false }
47 },
48 methods: {}
49 });
50 </script>
51 </body>
1 我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表
2
3 <div id="div4" v-bind:style="[baseStyles, overridingStyles]">{{ msg }}</div>
4 <script type="text/javascript">
5 new Vue({
6 el: "#div4",
7 data: {
8 msg: "我是陣列繫結方法",
9 baseStyles: {
10 color: 'green',
11 fontSize: '30px'
12 },
13 overridingStyles: {
14 'font-weight': 'bold'
15 }
16 }
17 })
18 </script>