ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

VUE学习——属性绑定

2026/9/12 22:12:23 拓冰建站 浏览量
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>