3.5 v-bind : 属性绑定
v-bind用于给元素的属性赋值。v-bind后面是 :属性名=[变量名]。
例如:v-bind:title="message":
很多属性值是不支持表达式的, 就可以使用v-bind
代码解释:
在 HTML 代码第 2 行,我们使用了 vbind 指令给 div 标签的 title 属性赋值。
在 HTML 代码第 6 行,我们使用了 vbind 指令给 a 标签的 href 属性赋值。
在 HTML 代码第 9 行,我们使用了 vbind 指令给 img 标签的 src 属性赋值。
在 HTML 代码第 12 行,我们使用了 vbind 指令给 bitton 标签的 disabled 属性赋值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<div>
<div v‐bind:title="title">
鼠标悬停查看消息!
</div>
<div>
<a v‐bind:href="href">图灵学院</a>
</div>
<div>
<img v‐bind:src="src"/>
</div>
<div>
<button v‐bind:disabled="disabled">禁用按钮</button>
</div>
</div>
</html>
vue 还提供了指令 v-bind 的简写方式,可以直接通过:属性名的方式。
**v-bind:src="src" **= :src="src"
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 Eternal Night
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果