03-Vue的动态绑定属性(一)

v-bind的基本使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <img v-bind:src="imgURL" alt="" />
      <a :href="aHref">百度一下</a>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          imgURL:
            "https://img13.360buyimg.com/mobilecms/s280x280_jfs/t1/88990/27/10628/194757/5e1edbcdE742f1831/14c8cd589a907c59.jpg.webp",
          aHref: "http://www.baidu.com"
        }
      })
    </script>
  </body>
</html>

1.为什么用v-bind

如当前代码，如果想让img的src使用变量imgURL，就必须使用v-biind绑定src，否则vue后台会去找一个叫imgURL的路径，显然是找不到的。个人理解是在v-bind绑定之后，vue系统会将该变量解析成字符串，从而找到对应的路径。

2.使用须知

不仅如此，所有标签中的属性只要用到变量就需要用b-bind绑定。

v-bind动态绑定class(对象语法)

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .active {
        color: red;
      }

      .active2 {
        font-size: 36px;
        font-style: italic;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <h2 class="active">{{message}}</h2>
      <h2 :class="active">{{message}}</h2>
      <h2 :class="{active: isActive, active2:isActive2}">{{message}}</h2>
      <h2 class="title" :class="getClasses()">{{message}}</h2>
      <button v-on:click="btnClick">更改</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          active: "active2",
          isActive: true,
          isActive2: true
        },
        methods: {
          btnClick: function() {
            this.isActive = !this.isActive
          },
          getClasses: function() {
            return { active: this.isActive, active2: this.isActive2 }
          }
        }
      })
    </script>
  </body>
</html>

1.v-bind对象语法的用法

<h2 class=“active”>{{message}}</h2>
<h2 :class=“active”>{{message}}</h2>

第一行中的类是去style中找到一个active的类选择器，而第二行中的active是去data中找一个叫active的变量，然后将active的值放在此处。上文的代码中data中的active变量字符串内容是active2，所以第二行内容和

<h2 class=“active2”>{{message}}</h2>

的渲染结果是一样的。

2.注意事项

如果一个标签想要绑定两个以上的类，则可以使用对象语法，具体如下：

<h2 :class="{类名1: boolean, 类名2:boolean}">{{message}}</h2>

其中的boolean也可以用data中的变量替换，切记类名和变量名都不要加引号。

如果感觉多个类名放在htm标签中不美观，可以将:class=" "引号中的内容放在vue的methods中或者computed(计算属性)中，自己封装方法或者变量获取。
如果在此手写原生的class，系统会自动合并而不会出现覆盖。

<h2 class=“title” :class="{active: isActive, active2:isActive2}">{{message}}</h2>

此时h2会有三个类，分别是active，active2和title

v-bind动态绑定class(数组语法)

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2 :class="['active','active2']">{{message}}</h2>
      <h2 :class="[active,active2]">{{message}}</h2>
      <h2 :class="getClasses()">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好",
          active: "test",
          active2: "test2"
        },
        methods: {
          getClasses: function() {
            return [this.active, this.active2]
          }
        }
      })
    </script>
  </body>
</html>

1.b-bind数组语法的用法

<h2 :class="[‘active’,‘active2’]">{{message}}</h2>

在上行代码中，active和active2都表示h2的所带的类，此时’ '表示这是一个字符串，所以注意一定要带上引号。控制台中的效果如下：
在这里插入图片描述
而如果想要像对象语法一样使用变量，只需要在data中提前定义变量即可，此时不带单引号的表示变量中的内容。

<h2 :class="[active,active2]">{{message}}</h2>

控制台中的效果如下：
在这里插入图片描述

2.数组语法和对象语法的对比

二者都可以绑定style中的属性，也都可以绑定data中的变量，但是相比较来说，对象语法更容易理解和使用，且不用引号容错率较高，所以对象语法再受大家欢迎。

第一次记录自己的学习笔记，如果您发现问题，欢迎指点。

蓝带915

发布了11 篇原创文章 · 获赞 0 · 访问量 61

私信关注