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

<template>
<div v-bind:class="boxClass" v-bind:id="boxId">
</div>
</template><script>
export default{data(){return{boxClass:"box1",boxId: "boxid1"}}
}
</script>

 

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

由于v-bind比较常用 所以可以简写，将v-bind省略只留下冒号。

<div :class="boxClass" :id="boxId"></div>

布尔型 

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

<template>
<div :class="boxClass" :id="boxId"><button :disabled="flag"></button>
</div>
</template><script>
export default{data(){return{boxClass:"box1",boxId: "boxid1",flag:true,}}
}
</script>

动态绑定多个值 

如果需要绑定多个值可以使用js的对象来实现

<template>
<div v-bind="object"></div>
</template><script>
export default{data(){return{object:{boxClass:"box1",boxId:"boxid1"}}}
}
</script>