03 属性绑定-优快云博客

本文链接：https://blog.youkuaiyun.com/x2487452552/article/details/144532859

属性绑定

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

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

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

简写

因为v-bind非常常用，有特定的简写语法

 <div :id="dynamicId" :class="dynamicClass"></div>

布尔型 Attribute

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

 <template>
   <button :disabled="isButtonDisabled">Button</button>
 <template>
 <script>
 export default {
   data() {
      return {
        isButtonDisabled: true
     } 
   }
 }
 </script>

动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象

<template>
   <div v-bind="objectOfAttrs">百战程序员</div>
 <template>
 <script>
 export default {
   data() {
      return {
        objectOfAttrs: {
          id: 'container',
          class: 'wrapper'
       }
     } 
   }
 }
 </script>