跳到主要内容位置

使用 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 属性值:

v-bind

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

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

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

小结

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

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买