Vue 指令之v-bind指令绑定属性

很酷的站长

发布于 2023-02-18 16:05:49

5150

文章被收录于专栏：站长的编程笔记站长的编程笔记

指令 (Directives) 是带有 v- 前缀的特殊属性，Mustache语法不能作用在HTML属性上，遇到这种情况应该使用v-bind指令。v-bind 指令可简写为 :

1. v-bind 绑定属性

<div id="app">
<p v-bind:class="art">标签内容</p>
</div>

<script>
let vm = new Vue({
el: '#app',
data: {
art: 'active'
}
})
</script>

最终生成的p标签

<p class="active">标签内容</p>

2. 动态参数（动态属性名）

<div id="app">
<p v-bind:[attrname]="art">标签内容</p>
</div>

<script>
let vm = new Vue({
el: '#app',
data: {
attrname: 'class',
art: 'active'

}
})
</script>

最终生成的p标签

<p class="active">标签内容</p>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

html

bind

mustache

语法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

Vue 指令之v-bind指令绑定属性

Vue 指令之v-bind指令绑定属性

1. v-bind 绑定属性

2. 动态参数（动态属性名）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐