vue 的属性绑定

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

2. <template>
3. <div v-bind:class="boxClass" v-bind:id="boxId">
4. </div>
5. </template>
7. <script>
8. export default{
9.   data(){
10.     return{
11.       boxClass:"box1",
12.       boxId: "boxid1"
13.     }
14.   }
15. }
16. </script>

复制代码

 

留意：v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicid 属性保持划一。如果绑定的值是 null 大概undefined ，那么该 attribute 将会从渲染的元素上移除 。
由于v-bind比力常用 以是可以简写，将v-bind省略只留下冒号。

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

复制代码

布尔型 

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

2. <template>
3. <div :class="boxClass" :id="boxId">
4.   <button :disabled="flag"></button>
5. </div>
6. </template>
8. <script>
9. export default{
10.   data(){
11.     return{
12.       boxClass:"box1",
13.       boxId: "boxid1",
14.       flag:true,
15.     }
16.   }
17. }
18. </script>

复制代码

动态绑定多个值 

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

2. <template>
3. <div v-bind="object"></div>
4. </template>
6. <script>
7. export default{
8.   data(){
9.     return{
10.       object:{
11.         boxClass:"box1",
12.         boxId:"boxid1"
13.       }
14.     }
15.   }
16. }
17. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金