VUE学习——属性绑定

属性绑定，就是给html添加id、class这样类似的操作。

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

对于属性绑定我们使用v-bind进行，日常中，我们可以简写：

<div :class="dynamicClass">Test</div>

我们也可以绑定布尔值，当值为null或者undefind的时候，不生效。

绑定多个属性，我们可以将其封装在对象里。

<template><div v-bind="objectOfAttrs">绑定多个属性</div>
</template><script>export default{data(){return{objectOfAttrs:{id:'idName',class:'className'}}}}
</script><style>
.className{color: red;font-size: 16px;
}</style>