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

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

1. v-bind 绑定属性

---

代码语言：javascript复制

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

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

最终生成的p标签

代码语言：javascript复制

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

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

---

代码语言：javascript复制

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

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

}
})
</script>

最终生成的p标签

代码语言：javascript复制

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

html bind mustache 语法

0 人点赞