属性绑定
双大括号不能再HTML attributes中使用。想要响应式地绑定一个attributte，应该使用v-bind指令
<script>export default {data() {return {dynamicClass: "appclass",dynamicId: "appId",dynamicTitle: null}}}
</script><template><div v-bind:id="dynamicId" v-bind:class="dynamicClass" v-bind:title="dynamicTitle">测试</div>
</template><style>.appclass{color: red;font-size: 30px;
}
</style>
v-bind指令指示Vue将元素的idattribute与组件的dybanucId属性保持一致。如果绑定的值是null或者undefined，那么该attribute将会从渲染的的元素上移除。
简写
因为v-bind非常常用，我们提供了特定的简写语法:,即直接将v-bind省去
<div :id="dynamicId" :class="dynamicClass" :title="dynamicTitle">测试</div>
布尔型attribute
布尔型attribute依据true/false值来决定attribute是否应该存在于该元素上，disabled就是最常见的例子之一。
<script>export default {data() {return {dynamicClass: "appclass",dynamicId: "appId",dynamicTitle: undefined,isButtonDisabled: false}}}
</script><template><div :id="dynamicId" :class="dynamicClass" :title="dynamicTitle">测试</div><button :disabled="isButtonDisabled">Button</button>
</template><style>.appclass{color: red;font-size: 30px;
}
</style>
动态绑定多个值
如果你有像这样的一个包含多个attribute的JavaScript对象
<script>export default {data() {return {dynamicClass: "appclass",dynamicId: "appId",dynamicTitle: undefined,isButtonDisabled: false,objectOfAttrs: {id: "appId",class: "appclass"}}}}
</script><template><div :id="dynamicId" :class="dynamicClass" :title="dynamicTitle">测试1</div><button :disabled="isButtonDisabled">Button</button><div v-bind:="objectOfAttrs">测试2</div>
</template><style>.appclass{color: red;font-size: 30px;
}
</style>
