• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • v-bind

    • 缩写::
    • 预期:any(with argument)| Object(without argument)
    • 参数:attrOrProp(optional)
    • 修饰符:.camel-将 kebab-case attribute 名转换为 camelCase。
    • 用法:

      动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。

      在绑定classstyle attribute 时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。

      在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

      没有参数时,可以绑定到一个包含键值对的对象。注意此时classstyle绑定不支持数组和对象。


    <!-- 绑定 attribute -->
    <img v-bind:src="imageSrc" />
    
    <!-- 动态 attribute 名 -->
    <button v-bind:[key]="value"></button>
    
    <!-- 缩写 -->
    <img :src="imageSrc" />
    
    <!-- 动态 attribute 名缩写 -->
    <button :[key]="value"></button>
    
    <!-- 内联字符串拼接 -->
    <img :src="'/path/to/images/' + fileName" />
    
    <!-- class 绑定 -->
    <div :class="{ red: isRed }"></div>
    <div :class="[classA, classB]"></div>
    <div :class="[classA, { classB: isB, classC: isC }]">
    <!-- style 绑定 -->
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="[styleObjectA, styleObjectB]"></div>
    
    <!-- 绑定一个全是 attribute 的对象 -->
    <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
    
    <!-- prop 绑定。"prop" 必须在 my-component 声明 -->
    <my-component :prop="someThing"></my-component>
    
    <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
    <child-component v-bind="$props"></child-component>
    
    <!-- XLink -->
    <svg><a :xlink:special="foo"></a></svg>
    </div>
    

    .camel修饰符允许在使用 DOM 模板时将v-bind property 名称驼峰化,例如 SVG 的viewBox property:

    <svg :view-box.camel="viewBox"></svg>
    

    在使用字符串模板或通过vue-loader/vueify编译时,无需使用.camel

    上篇:v-on

    下篇:v-model