Vuejs学习笔记(一)-7.html的属性动态绑定操作v-bind

前面学了vue的插值操作，基本是对html标签内部展示的内容的展示。此处学习v-bind是对标签属性的动态绑定操作。

demo1:动态绑定class属性：

知识点1:v-bind动态绑定class属性
知识点2：v-bind动态绑定class属性使用的是对象绑定，当style变量对应的值为true时，显示该style;为false则不显示
知识点3: vue解析属性时，会将非动态绑定的class属性和动态绑定的class属性进行合并

代码如下：
 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 01-v-bind动态绑定class对象语法.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 21:38
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>01-v-bind动态绑定class对象语法</title>
16   <style>
17       .active {
18           color: red;
19       }
20       .offline {
21           color: green;
22       }
23       .title {
24           font-size: 50px;
25       }
26   </style>
27 </head>
28 <body>
29 <div id="app">
30   <!--  知识点1:v-bind动态绑定class属性-->
31   <!--  知识点2：v-bind动态绑定class属性使用的是对象绑定，当style变量对应的值为true时，显示该style;为false则不显示-->
32   <!--  知识点3: vue解析属性时，会将非动态绑定的class属性和动态绑定的class属性进行合并-->
33   <h2 class='title' v-bind:class="{active:isActive,offline:!isActive}">{{ message }}</h2>
34   <button v-on:click="changeClick">改变颜色</button>
35 </div>
36 <script src="../js/vue.js"></script>
37 <script>
38 
39   const app = new Vue({
40     el: '#app',
41     data: {
42       message: 'hello',
43       isActive: true,
44     },
45     methods: {
46       changeClick() {
47         this.isActive = !this.isActive
48       }
49     }
50   })
51 </script>
52 </body>
53 </html>

 


显示如下：
class为 title和active时的显示：

 

 class为offline和title时的显示：

 

 Demo2:动态绑定class的对象语法写法2

以上动态绑定class时，实质上是动态绑定一个对象，如果该对象非常长时，可以抽象到vue实例内部的方法中，然后再Html页面调用这个方法,效果一样，代码更好维护。如下：

<!--
@author:invoker
@project:project_lianxi
@file: 02-v-bind动态按本规定class对象(抽离对象).html
@contact:invoker2021@126.com
@descript:
@Date:2021/6/30 21:53
@version: html5
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-v-bind动态绑定class对象语法</title>
  <style>
      .active {
          color: red;
      }

      .offline {
          color: green;
      }

      .title {
          font-size: 50px;
      }
  </style>
</head>
<body>
<div id="app">
  <!-- 知识点4:对象语法，写法更加优雅，getClasses(),括号必须要带上-->
  <h2 class='title' v-bind:class="getClasses()">{{ message }}</h2>
  <button v-on:click="changeClick">改变颜色</button>
</div>
<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      isActive: true,
    },
    methods: {
      changeClick() {
        this.isActive = !this.isActive
      },
      getClasses() {
        // 返回一个对象，所以使用{}
        return {
          active: this.isActive,
          offline: !this.isActive
        }
      }
    }
  })
</script>
</body>
</html>

Demo3:动态绑定class的方式3，数组语法（具体应用场景未知）

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 03-v-bind动态绑定class属性的数组语法.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 22:05
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>03-v-bind动态绑定class属性的数组语法</title>
16   <style>
17     .aa {
18         color: red;
19     }
20     .bb {
21         fone-size:35px;
22     }
23   </style>
24 </head>
25 <body>
26 <div id="app">
27   <h2 v-bind:class="getClasses()">{{ message }}</h2>
28 </div>
29 <script src="../js/vue.js"></script>
30 <script>
31 
32   const app = new Vue({
33     el: '#app',
34     data: {
35       message: 'hello',
36       active:'aa',
37       offLine:'bb'
38     },
39     methods:{
40       getClasses(){
41         return [this.active,this.offLine]
42       }
43     }
44 
45   })
46 </script>
47 </body>
48 </html>

 

posted @ 2021-06-30 22:13  kaer_invoker  阅读(462)  评论(0)  编辑  收藏  举报