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

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

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

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

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

在 VSCode 中创建 HTML

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=1755761727&x-signature=B2NoIrwbLhXuB2lHhO1ZmY1paA4%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 变量，修改代码如下：

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 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 指令的简写形式：

html 复制代码

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

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

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

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="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>

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

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

html 复制代码

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

script 部分增加 handleChange 函数的实现

js 复制代码

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");

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

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

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

html 复制代码

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

js 复制代码

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

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

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>
    <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>

刷新页面，点击按钮：

再次点击按钮：

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

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

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

html 复制代码

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

将 true 改为我们的变量：

html 复制代码

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

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

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

html 复制代码

<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 来表示，也可以一起放在对象中表示。

除了上述几种方式之外，还可以通过函数来绑定，即绑定函数的返回值，函数的返回值是一个对象：

js 复制代码

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

html 复制代码

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

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

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

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

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

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

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