vue 绑定class、v-bind:style(对象语法、数组语法)
绑定 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>
