使用 v-bind 在 HTML 属性中绑定 data 中的数据 - Vue 3.x 基础教程

在了解了如何使用 data 定义模板中所需要的数据，以及如何在模板开合标签中绑定数据之后，我们来看一下如何在 HTML 属性中绑定 data 提供的数据。 在模板中，我们不能直接使用大括号的方式绑定数据，到 HTML 属性中：

X 错误
<a href="{{link}}">链接</a>

data() { return { link: "https://zxuqian.cn" } }

也不能直接使用 data 中的属性名，这样会被认为是普通的 html 属性：

<a href="link">链接</a>

data() { return { link: "https://zxuqian.cn" } }

正确的做法是使用 v-bind 指令。

什么是指令

指令，是 vue 提供的一组可以直接在 html 模板中使用的特殊属性，例如 v-bind、v-for、v-if，用于实现数据绑定、循环、条件判断等。我们知道普通的 HTML 能实现的功能有限，基本上就是单纯的展示文本数据，那么 vue 指令对 HTML 进行了增强，可以实现一些稍复杂的逻辑。

v-bind 指令

v-bind 指令是 vue 指令中的一种，它的作用就是把 vue 中，data() 函数返回的对象属性，绑定的 HTML 标签的属性上：

<a v-bind:href="link">链接</a>

data() { return { link: "https://zxuqian.cn" } }

使用方法

v-bind 的使用方法跟普通 html 属性一样，只是需要在属性前加上 v-bind 和 : 冒号，之后属性值就可以使用 vue data 中的属性了：

<a v-bind:href="link">链接</a>

另外，因为 v-bind 指令，太过于常用，所以也可以省略 v-bind 这一串，只剩下 : 冒号：

<a :href="link">链接</a>

示例

我们来看看这个示例的实际执行效果。我们在 index.js 中，定义 data() 函数，它返回的对象中有一个 link 属性，值为一个示例网站的链接：

const app = Vue.createApp({
  data() {
    return {
      link: "https://zxuqian.cn",
    };
  },
});
app.mount("#app");

之后在 index.html 中，编写一个 <a />标签，并使用 v-bind 指令，把 href 属性值和 data 中的 link 属性值绑定：

<a v-bind:href="link">链接</a>

我们在 live server 中打开页面，点击链接，可以看到正确的跳转到了 link 属性指定的链接中。 如果我们把 v-bind: 这一串去掉，那么 href 属性的值就会变成 "link" 这个字符串本身，vue 不会把它替换为 data 中的 link 属性值：

所以在 html 属性中使用 data 里定义的数据时，要加上 v-bind。 最后，我们可以使用 v-bind 的简写形式：

<a :href="link">链接</a>

这个效果和使用完整形式是一样的，因为这样可以减少很多代码，所以推荐使用简写形式。

小结

这个就是如何把 data 中的数据绑定到 html 属性的过程，就是使用 v-bind 指令，在冒号后面写上 html 原生的属性名，然后值为 data 中的属性名。v-bind 可以使用简写形式，只保留一个冒号，这个是推荐的写法。