属性绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令

xxxxxxxxxx
<template>
    <div v-bind:id="dynamicId" v-bind:class="dynamicClass">AppID</div>
</template>
<script>
export default {
    data(){
        return{
            dynamicId:"appid",
            dynamicClass:"appclass"
        }
    }
}
</script>
<style>
.appclass{
    color: red;
    font-size: 20px;
}
</style>

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除

简写

因为 v-bind 非常常用，我们提供了特定的简写语法

xxxxxxxxxx
<div :id="dynamicId" :class="dynamicClass"></div>

布尔型 Attribute

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上,disabled就是最常见的例子之一

xxxxxxxxxx
<template>
    <button :disabled="isButtonDisabled">Button</button>
</template>
<script>
export default {
    data(){
        return{
            isButtonDisabled:true
        }
    }
}
</script>

动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象

xxxxxxxxxx
<template>
    <div v-bind="objectOfAttrs">百战程序员</div>
</template>
<script>
export default {
    data() {
        return {
            objectOfAttrs: {
                id: 'container',
                class: 'wrapper'
            }
        }
    }
}
</script>