Vue3.x 全家桶 | 12 - Vue 的指令 : v-bind

RiemannHypo
VIP.5 如鱼得水
195 阅读6分钟

iShot_2023-12-21_18.33.21.png

一、Vue 的 v-bind 指令基本使用

v-bind 是 Vue 中非常非常重要的指令，也是使用频率非常高的指令；前面几篇文章中介绍的指令主要是将变量放入模板内容中并在页面上渲染出来，但是除了内容需要动态的决定以外，标签的属性也是需要动态绑定的，例如 img 标签的 src 属性，a 标签的 href 属性等。

v-bind 可以用来实现标签属性的动态绑定，可以动态绑定一个或者多个 attribute 或者一个 组件 prop 到表达式。

v-bind 还有一种简写的形式，即 :

在 VSCode 中创建 HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-bind</title>
  </head>
  <body>
    <div id="app">
      <div>
        <img
          src="https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b1d62a3061d049f99146fa6c60dfb9f6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgUmllbWFubkh5cG8=:q75.awebp?rk3s=f64ab15b&x-expires=1772097010&x-signature=1ZCQFqhP0ALhZWwV4Allt9Cz4zg%3D"
          alt=""
        />
      </div>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            message: "Hello Vue",
          };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

图片可以被成功渲染出来，但是如果此时我将图片的 URL 地址存放到一个 imgUrl 变量中，img 标签页如何使用到 imgUrl 变量的值并将图片渲染出来呢？

此时就需要使用到 v-bind 来绑定 imgUrl 变量，修改代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-bind</title>
  </head>
  <body>
    <div id="app">
      <div>
        <img v-bind:src="imgUrl" alt="" />
      </div>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            message: "Hello Vue",
            imgUrl:
              "https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b1d62a3061d049f99146fa6c60dfb9f6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5o6Y6YeR6YWx:q75.awebp?rk3s=f64ab15b&x-expires=1755136488&x-signature=RnliZ9hUmQuV5rOwlkS9qKUWm14%3D",
          };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

我们也可以使用 v-bind 指令的简写形式：

<img :src="imgUrl" alt="" />

刷新页面，图片被成功渲染出来

image.png

也可以对 a 标签的 href 属性进行动态的绑定：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-bind</title>
  </head>
  <body>
    <div id="app">
      <div>
        <img :src="imgUrl" alt="" />
        <a :href="xjUrl">稀土掘金</a>
      </div>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            message: "Hello Vue",
            imgUrl:
              "https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b1d62a3061d049f99146fa6c60dfb9f6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5o6Y6YeR6YWx:q75.awebp?rk3s=f64ab15b&x-expires=1755136488&x-signature=RnliZ9hUmQuV5rOwlkS9qKUWm14%3D",
            xjUrl: "https://juejin.cn/",
          };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

点击超链接可以实现页面的跳转

image.png

既然我们已经实现了对 img 标签的 src 属性的动态绑定，因此我们就可以进行图片的动态切换，在上述代码中增加一个 button 按钮，并绑定一个点击函数，该函数可以改变 imgUrl 变量的值，从而实现图片的切换：

<div id="app">
  <div>
    <img :src="imgUrl" alt="" />
    <a :href="xjUrl">稀土掘金</a>
  </div>
  <button @click="handleChange">切换图片</button>
</div>

script 部分增加 handleChange 函数的实现

const app = Vue.createApp({
    data: function () {
      return {
        message: "Hello Vue",
        imgUrl:
          "https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b1d62a3061d049f99146fa6c60dfb9f6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5o6Y6YeR6YWx:q75.awebp?rk3s=f64ab15b&x-expires=1755136488&x-signature=RnliZ9hUmQuV5rOwlkS9qKUWm14%3D",
        xjUrl: "https://juejin.cn/",
      };
    },
    methods: {
      handleChange() {
        this.imgUrl =
          "https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7c590d085b0041259825dc622ca2cbbe~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgVFJBRQ==:q75.awebp?rk3s=f64ab15b&x-expires=1755524219&x-signature=mVYTezKeLjdqVx%2FK2JIb07MNLEo%3D";
      },
    },
  });
  app.mount("#app");

刷新页面，点击切换图片按钮，图片可以成功的切换

image.png

二、Vue 的 v-bind 动态绑定 class

v-bind 动态绑定标签的 class 属性也是非常常用的一个场景，在实际开发中我们有时候希望元素的 class 属性也是动态的，比如当某个状态时字体为红色，当数据是另一个状态时，字体显示为黑色，又或者是按钮的可点击或者不可点击：

<div id="app">
  <div>
    <h2 :class="hClass"></h2>
  </div>
</div>

const app = Vue.createApp({
    data: function () {
      return {
        message: "Hello Vue",
        hClass: "title",
      };
    }
  });

刷新页面，h2 标签被加上了一个 title 的 class 属性，这个属性是可以动态添加的，接下来我们可以通过点击按钮来动态添加 title 属性，并改变字体的颜色：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-bind</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <h2 :class="hClass?'active':''">{{message}}</h2>
        <button @click="handleChange">change color</button>
      </div>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            message: "Hello Vue",
            hClass: false,
          };
        },
        methods: {
          handleChange() {
            this.hClass = !this.hClass;
          },
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

刷新页面，点击按钮：

image.png

再次点击按钮：

image.png

这样我们就可以通过点击按钮动态添加或者删除属性，从而控制元素的样式。

上述代码中元素中动态添加样式是通过三元运算符来实现的，变量和样式比较简单的情况下还好，但是一旦复杂了，三元表达式的阅读性就不高了。

除此上述方式之外我们还可以通过绑定一个对象来实现，对象的 Key 为元素要绑定的演示，Value 值为 True 或者 False：

<h2 :class="{'active': true}">{{message}}</h2>

image.png

将 true 改为我们的变量：

 <h2 :class="{'active': hClass}">{{message}}</h2>

刷新页面，实现的效果与上述效果一致，这种写法更加简洁明了。

常用绑定的几种表达方式：

<div id="app">
  <div>
    <!-- 最普通的绑定方式 -->
    <h2 :class="hClass">{{message}}</h2>
    <!-- 三元表达式动态绑定 -->
    <h2 :class="hClass?'active':''">{{message}}</h2>
    <!-- 对象绑定 -->
    <h2 :class="{'alpha': true, 'bravo': false}" class="info">
      {{message}}
    </h2>
    <!-- 对象动态绑定 -->
    <h2 :class="{'active': hClass}" class="info">{{message}}</h2>
    <button @click="handleChange">change color</button>
  </div>

对于普通的属性，可以单独用一个 class 来表示，也可以一起放在对象中表示。

还可以通过函数来绑定，即绑定函数的返回值，函数的返回值是一个对象：

getHclass() {
    return { active: this.hClass, info: true };
},

<!-- 函数返回值绑定 -->
<h2 :class="getHclass()">{{message}}</h2>

点击按钮，同样可以实现样式的动态绑定

image.png

除了的动态绑定 class 属性的几种方式外，还可以使用数组的方式绑定，即传给 :class 一个数组，v-bind 会将数组中的元素全部绑定到 class 上作为属性。

<!-- 数组绑定 -->
<h2 :class="['alpha', 'bravo', 'charlie']">{{message}}</h2>

刷新页面：

image.png

当然我们也可以让函数返回一个数组，来实现 class 通过数组绑定属性，通过数组动态绑定 class 属性的方式在实际开发中并不常用。

三、Vue 的 v-bind 动态绑定 style

除了绑定 class 以外，还可以利用 v-bind 绑定 CSS 内联样式，比如动态数据决定文字的颜色、大小等。

首先创建一个基本的 HTML 页面，给 span 标签加上内联样式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-bind</title>
  </head>
  <body>
    <div id="app">
      <div>
          <span style="color: red">{{message}}</span>
      </div>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            message: "Hello Vue",
          };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

使用 v-bind 指令动态绑定 style 也可以使用对象语法的方式：

<div id="app">
  <div>
    <span :style="{'color': spanColor, 'font-size': '30px'}"
      >{{message}}</span
    >
  </div>
</div>

定义变量

const app = Vue.createApp({
    data: function () {
      return {
        message: "Hello Vue",
        spanColor: "red",
      };
    },
});
app.mount("#app");

刷新页面：

image.png

通过对象语法绑定 class 或者 style 的时候要注意，最好给 Key 加上单引号，如果 Key 不使用单引号，对于一些使用 - 连接的 style 如 font-size 会不生效，可以改为使用驼峰的方式如 fontSize，建议所有的 Key 全部使用单引号的方式，避免出现样式不生效的情况。

四、Vue 的 v-bind 动态绑定其他

在一些情况下，属性名称也是不固定的，不像 src、href、class、style 等固定属性名称的绑定方式，如果名称是不固定的，我们可以使用 :[属性名]="属性值" 这种方式进行绑定，也称为动态绑定属性。

<span :[name]="value">{{message}}</span>

例如：

<span :[attrName]="'alpha'">{{message}}</span>

定义变量

const app = Vue.createApp({
    data: function () {
      return {
        message: "Hello Vue",
        attrName: "title",
      };
    },
  });
app.mount("#app");

刷新页面：

image.png

需要注意的是在动态属性值的时候一定要使用单引号包裹起来，否则不生效，例如：

<span :[attrName]="alpha">{{message}}</span>

刷新页面：

image.png

上述的写法是把 alpha 当成一个变量去解析，而在 data 中定义的变量没有有 alpha 就在成无法解析，如果是普通的字符串，一定要用单引号包裹。

当然动态绑定属性也可使用对象语法来绑定：

<div v-bind="infos">{{message}}</div>

添加变量，Vue 会将对象遍历然后绑定到元素上面：

const app = Vue.createApp({
data: function () {
  return {
    message: "Hello Vue",
    name: "title",
    infos: { name: "alpha", age: 20, work: "engineer" },
  };
},
});
app.mount("#app");

刷新页面：

image.png

v-bind 指令在 Vue 项目的开发中使用非常频率非常高。

avatar
文章
阅读
粉丝