vue属性绑定指令v-bind

vue属性绑定​

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

<div v-bind:id="appid"></div>

export default{
   data(){
     return{
         appid:'cmx'
      }
   }

}

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

简写​

      因为 v-bind 非常常用，我们提供了特定的简写语法：

<div :id="appid"></div>

      开头为 : 的 attribute(属性)可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的，但相信在你了解了它更多的用处后，你应该会更喜欢它。

同名简写 ​

      如果 attribute(属性) 的名称与绑定的 JavaScript 值的名称相同，那么可以进一步简化语法，省略 attribute 值：

<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>

      这与在 JavaScript 中声明对象时使用的属性简写语法类似。请注意，这是一个只在 Vue 3.4 及以上版本中可用的特性。

布尔型 Attribute​

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

      v-bind 在这种场景下的行为略有不同：

<button :disabled="isButtonDisabled">Button</button>

export default{
    data(){
       return{
          isButtonDisabled:true

       }

    }

}

      当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

动态绑定多个值​

      如果你有像这样的一个包含多个 attribute(属性) 的 JavaScript 对象：

explort default{
    data(){
       return{
          obj:{
             id:'appId',
             class:'appClass'
          }
       }
    }

}

      通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

<div v-bind="objectOfAttrs"></div>

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/157/1055.html

很赞哦！ (0)