Vue v-bind 指令

示例

使用v-bind更改背景颜色的指令<div>元素。

<template>
  <h2>Example v-bind Directive</h2>
  <p>The v-bind directive connects the style attribute of the DIV element to the 'colorVal' data property.</p>
  <div v-bind:style="{ backgroundColor: colorVal }">DIV element</div>
  <p>Use the input type="color" box below to change the color.</p>
  <p><input type="color" v-model="colorVal"> <pre>colorVal: '{{ colorVal }}'</pre></p>
</template>

运行示例 »

请参阅下面的更多示例。

定义和用法

这个v-bind指令用于将 HTML 属性绑定到 Vue 实例中的属性（上面的示例），或传递 props（下面的示例 1）。

如果我们更改 Vue 实例属性，并且该属性绑定到 HTML 属性v-bind，由于 Vue 的反应系统，HTML 元素将自动更新为新的属性值。

' 的简写v-bind:' 简直就是 ':'，或者 '.' 当与.prop修饰符。

这些修饰符可以与v-bind指令，但通常不需要：

修饰符	细节
`.camel`	将属性名称从短横线命名法转换为驼峰命名法。当使用构建步骤或使用字符串模板时不需要这样做。
`.prop`	强制将绑定设置为 DOM 属性。除非使用自定义元素，否则 Vue 将查明是否提供了密钥`v-bind`是 DOM 属性或元素的属性，并适当地绑定键。
`.attr`	强制将绑定设置为 DOM 属性。除非使用自定义元素，否则 Vue 将查明是否提供了密钥`v-bind`是 DOM 属性或元素的属性，并适当地绑定键。

更多示例

示例1

使用v-bind发送 'img' 属性，数据类型为布尔值（true/false）。

<template>
  <h2>Example v-bind Directive</h2>
  <p>Two props are sent to the component. We must use v-bind for the prop with 'boolean' data type.</p>
  <button v-on:click="this.img = !this.img">Toggle 'img' prop value</button> {{ img }}
  <info-box 
    turtle-text="Turtles can hold their breath for a long time."
    v-bind:turtle-img="img"
  />
</template>

<script>
export default {
  data() {
    return {
      img: true
    }
  }
}
</script>

运行示例 »

示例2

使用 'v-bind:‘简写’:'。

<template>
  <h2>Example v-bind Directive</h2>
  <p>Two props are sent to the component. We must use v-bind for the prop with 'boolean' data type.</p>
  <button v-on:click="this.img = !this.img">Toggle 'img' prop value</button> {{ img }}
  <info-box 
    turtle-text="Turtles can hold their breath for a long time."
    :turtle-img="img"
  />
</template>

<script>
export default {
  data() {
    return {
      img: true
    }
  }
}
</script>

运行示例 »

示例3

使用.prop修改器来改变indeterminate复选框的 DOM 属性。

<template>
  <p>Using the '.prop' modifier to toggle the 'indeterminate' appearance of the checkbox:</p>
  <button v-on:click="indetVal = !indetVal">Toggle</button>
  <p>
    <input type="checkbox" v-bind:indeterminate.prop="indetVal"> Checkbox
  </p>
</template>

<script>
export default {
  data() {
    return {
      indetVal: false
    };
  }
};
</script>

<style>
input {
  margin: 20px;
  scale: 2;
}
</style>

运行示例 »

示例4

使用.prop修饰符简写，以及v-bind简写，所以 'v-bind:indeterminate.prop'变成'.indeterminate'。

<template>
  <p>Using the '.prop' shorthand so that 'v-bind:indeterminate.prop' becomes '.indeterminate':</p>
  <button v-on:click="indetVal = !indetVal">Toggle</button>
  <p>
    <input type="checkbox" .indeterminate="indetVal"> Checkbox
  </p>
</template>

<script>
export default {
  data() {
    return {
      indetVal: false
    };
  }
};
</script>

<style scoped>
input {
  margin: 10px;
  scale: 2;
}
</style>

运行示例 »

码农教程 - 一技在手,衣食无忧!

Vue v-bind 指令

示例

定义和用法

更多示例

示例1

示例2

示例3

示例4

相关页面