Vue v-bind 指令
示例
使用 v-bind 指令更改 <div> 元素的背景颜色。
<template>
<h2>Example v-bind Directive</h2>
<p>v-bind 指令将 DIV 元素的样式属性连接到"colorVal"数据属性。</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 实例属性，并且该属性通过 v-bind 绑定到 HTML 属性，则由于 Vue 的反应性系统，HTML 元素将自动使用新属性值进行更新。
与 .prop 修饰符一起使用时，"v-bind:"的简写形式为":"或"."。
这些修饰符可以与 v-bind 指令一起使用，但通常不需要:
| 修饰符 | 详细信息 |
|---|---|
.camel |
将属性名称从短横线命名法转换为驼峰命名法。 当使用构建步骤或使用字符串模板时不需要这样做。 |
.prop |
强制将绑定设置为 DOM 属性。 除非使用自定义元素，否则 Vue 将查明 v-bind 提供的键是 DOM 属性还是元素的属性，并适当地绑定该键。 |
.attr |
强制将绑定设置为 DOM 属性。 除非使用自定义元素，否则 Vue 将查明 v-bind 提供的键是 DOM 属性还是元素的属性，并适当地绑定该键。 |
更多示例
示例 1
使用 v-bind 发送 'img' 属性，数据类型为布尔值（true/false）。
<template>
<h2>v-bind 指令示例</h2>
<p>两个 props 被发送到组件。 我们必须使用 v-bind 作为具有"boolean"数据类型的 prop。</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>v-bind 指令示例</h2>
<p>两个 props 被发送到组件。 我们必须使用 v-bind 作为具有"boolean"数据类型的 prop。</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"变为".inminated"。
<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 教程:Vue CSS 绑定
Vue 教程:Vue v-bind 指令
Vue 教程:Vue Props 选项
