Chỉ thị Vue v-bind
Ví dụ
Sử dụng lệnh v-bind để thay đổi màu nền của phần tử <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>
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Lệnh v-bind được sử dụng để liên kết một thuộc tính HTML với một thuộc tính trong phiên bản Vue (Ví dụ ở trên) hoặc để truyền đạo cụ (Ví dụ 1 bên dưới).
Nếu chúng ta thay đổi thuộc tính phiên bản Vue và thuộc tính đó được liên kết với thuộc tính HTML bằng v-bind , phần tử HTML sẽ tự động được cập nhật với giá trị thuộc tính mới nhờ hệ thống phản ứng của Vue.
Viết tắt của ' v-bind: ' chỉ đơn giản là ' : ' hoặc ' . ' khi được sử dụng với công cụ sửa đổi .prop .
Những công cụ sửa đổi này có thể được sử dụng với lệnh v-bind , nhưng thường không cần thiết:
| bổ nghĩa | Chi tiết |
|---|---|
.camel | Chuyển đổi tên thuộc tính từ kebab-case thành CamelCase. Điều này không cần thiết khi sử dụng bước xây dựng hoặc khi sử dụng mẫu Chuỗi. |
.prop | Buộc đặt một liên kết làm thuộc tính DOM. Trừ khi làm việc với các phần tử tùy chỉnh, Vue sẽ tìm hiểu xem khóa được cung cấp với v-bind là thuộc tính DOM hay thuộc tính của phần tử và liên kết khóa một cách thích hợp. |
.attr | Buộc một liên kết được đặt làm thuộc tính DOM. Trừ khi làm việc với các phần tử tùy chỉnh, Vue sẽ tìm hiểu xem khóa được cung cấp với v-bind là thuộc tính DOM hay thuộc tính của phần tử và liên kết khóa một cách thích hợp. |
Thêm ví dụ
ví dụ 1
Sử dụng v-bind để gửi prop 'img', với kiểu dữ liệu boolean (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>
Chạy ví dụ »Ví dụ 2
Sử dụng ' v-bind: ' tốc ký ' : '.
<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>
Chạy ví dụ »Ví dụ 3
Sử dụng công cụ sửa đổi .prop để thay đổi thuộc tính DOM indeterminate của hộp kiểm.
<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>
Chạy ví dụ »Ví dụ 4
Sử dụng cách viết tắt của công cụ sửa đổi .prop và cách viết tắt v-bind để ' v-bind:indeterminate.prop ' trở thành ' .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>
Chạy ví dụ »Trang liên quan
Hướng dẫn Vue: Liên kết CSS Vue
Hướng dẫn Vue: Chỉ thị Vue v-bind
Hướng dẫn Vue: Đạo cụ Vue
