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

指令 (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>