属性绑定,就是给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>