Vue v-model Chỉ thị
So với JavaScript thông thường, làm việc với các biểu mẫu trong Vue dễ dàng hơn vì lệnh v-model kết nối với tất cả các loại phần tử đầu vào theo cùng một cách.
v-model tạo liên kết giữa thuộc tính value phần tử đầu vào và giá trị dữ liệu trong phiên bản Vue. Khi bạn thay đổi đầu vào, dữ liệu sẽ cập nhật và khi dữ liệu thay đổi, đầu vào cũng sẽ cập nhật (ràng buộc hai chiều).
Ràng buộc hai chiều
Như chúng ta đã thấy trong ví dụ về danh sách mua sắm ở trang trước, v-model cung cấp cho chúng ta liên kết hai chiều, nghĩa là các phần tử đầu vào của biểu mẫu sẽ cập nhật phiên bản dữ liệu Vue và một thay đổi trong dữ liệu phiên bản Vue sẽ cập nhật các đầu vào .
Ví dụ bên dưới cũng thể hiện ràng buộc hai chiều với v-model .
Ví dụ
Liên kết hai chiều: Hãy thử viết bên trong trường đầu vào để xem giá trị thuộc tính dữ liệu Vue có được cập nhật hay không. Ngoài ra, hãy thử viết trực tiếp mã để thay đổi giá trị thuộc tính dữ liệu Vue, chạy mã và xem trường đầu vào được cập nhật như thế nào.
<div id="app">
<input type="text" v-model="inpText">
<p> {{ inpText }} </p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
inpText: 'Initial text'
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử » Lưu ý: Chức năng liên kết hai chiều v-model thực sự có thể đạt được bằng sự kết hợp của v-bind:value và v-on:input :
-
v-bind:valueđể cập nhật phần tử đầu vào từ dữ liệu phiên bản Vue, - và
v-on:inputđể cập nhật dữ liệu phiên bản Vue từ đầu vào.
Nhưng v-model dễ sử dụng hơn nhiều nên đó là điều chúng ta sẽ làm.
Hộp kiểm động
Chúng tôi thêm một hộp kiểm vào danh sách mua sắm của mình trên trang trước để đánh dấu xem một mặt hàng có quan trọng hay không.
Bên cạnh hộp kiểm, chúng tôi thêm văn bản luôn phản ánh trạng thái 'quan trọng' hiện tại, thay đổi linh hoạt giữa 'đúng' hoặc 'sai'.
Chúng tôi sử dụng v-model để thêm hộp kiểm và văn bản động này nhằm cải thiện tương tác của người dùng.
Chúng tôi cần:
- một giá trị boolean trong thuộc tính dữ liệu phiên bản Vue được gọi là 'quan trọng'
- một hộp kiểm nơi người dùng có thể kiểm tra xem mục này có quan trọng không
- văn bản phản hồi động để người dùng có thể biết liệu mục này có quan trọng không
Dưới đây là hình thức của tính năng 'quan trọng', tách biệt khỏi danh sách mua sắm.
Ví dụ
Văn bản hộp kiểm được tạo động để văn bản phản ánh giá trị đầu vào của hộp kiểm hiện tại.
<div id="app">
<form>
<p>
Important item?
<label>
<input type="checkbox" v-model="important">
{{ important }}
</label>
</p>
</form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
important: false
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Hãy đưa tính năng động này vào ví dụ về danh sách mua sắm của chúng tôi.
Ví dụ
<div id="app">
<form v-on:submit.prevent="addItem">
<p>Add item</p>
<p>Item name: <input type="text" required v-model="itemName"></p>
<p>How many: <input type="number" v-model="itemNumber"></p>
<p>
Important?
<label>
<input type="checkbox" v-model="itemImportant">
{{ important }}
</label>
</p>
<button type="submit">Add item</button>
</form>
<hr>
<p>Shopping list:</p>
<ul>
<li v-for="item in shoppingList">{{item.name}}, {{item.number}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
important: false,
shoppingList: [
{ name: 'Tomatoes', number: 5, important: false }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
important: this.itemImportant
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
this.itemImportant = false
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Đánh dấu các mặt hàng đã tìm thấy trong danh sách mua sắm
Hãy thêm chức năng để các mặt hàng được thêm vào danh sách mua sắm có thể được đánh dấu là đã tìm thấy.
Chúng tôi cần:
- các mục danh sách để phản ứng khi nhấp chuột
- để thay đổi trạng thái của mục được nhấp thành 'đã tìm thấy' và sử dụng trạng thái này để di chuyển mục đó đi một cách trực quan và tấn công nó bằng CSS
Chúng tôi tạo một danh sách chứa tất cả các mục chúng tôi cần tìm và một danh sách bên dưới chứa các mục được tìm thấy đã được gạch ngang. Thực tế, chúng ta có thể đặt tất cả các mục trong danh sách đầu tiên và tất cả các mục trong danh sách thứ hai, đồng thời chỉ cần sử dụng v-show với thuộc tính dữ liệu Vue 'được tìm thấy' để xác định xem nên hiển thị mục trong danh sách thứ nhất hay thứ hai.
Ví dụ
Sau khi thêm các mặt hàng vào danh sách mua sắm, chúng ta có thể giả vờ đi mua sắm, nhấp vào các mặt hàng đó sau khi tìm thấy chúng. Nếu chúng tôi nhấp nhầm vào một mục, chúng tôi có thể đưa mục đó trở lại danh sách 'không tìm thấy' bằng cách nhấp vào mục đó một lần nữa.
<div id="app">
<form v-on:submit.prevent="addItem">
<p>Add item</p>
<p>Item name: <input type="text" required v-model="itemName"></p>
<p>How many: <input type="number" v-model="itemNumber"></p>
<p>
Important?
<label>
<input type="checkbox" v-model="itemImportant">
{{ important }}
</label>
</p>
<button type="submit">Add item</button>
</form>
<p><strong>Shopping list:</strong></p>
<ul id="ulToFind">
<li v-for="item in shoppingList"
v-bind:class="{ impClass: item.important }"
v-on:click="item.found=!item.found"
v-show="!item.found">
{{ item.name }}, {{ item.number}}
</li>
</ul>
<ul id="ulFound">
<li v-for="item in shoppingList"
v-bind:class="{ impClass: item.important }"
v-on:click="item.found=!item.found"
v-show="item.found">
{{ item.name }}, {{ item.number}}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
important: false,
shoppingList: [
{ name: 'Tomatoes', number: 5, important: false, found: false }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber,
important: this.itemImportant,
found: false
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
this.itemImportant = false
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Sử dụng v-model để tạo The Form Itself Dynamic
Chúng ta có thể tạo một biểu mẫu để khách hàng gọi món từ thực đơn. Để thuận tiện cho khách hàng, chúng tôi chỉ đưa ra các loại đồ uống để khách hàng lựa chọn sau khi khách hàng đã chọn gọi đồ uống. Điều này có thể được cho là tốt hơn việc giới thiệu cho khách hàng tất cả các món trong thực đơn cùng một lúc. Trong ví dụ này, chúng tôi sử dụng v-model và v-show để làm cho biểu mẫu trở nên động.
Chúng tôi cần:
- Một biểu mẫu có các thẻ đầu vào có liên quan và nút 'Đặt hàng'.
- Nút radio để chọn 'Bữa tối', 'Đồ uống' hoặc 'Món tráng miệng'.
- Sau khi chọn danh mục, menu thả xuống sẽ xuất hiện với tất cả các mục trong danh mục đó.
- Khi một mặt hàng được chọn, bạn sẽ thấy hình ảnh của nó, bạn có thể chọn số lượng và thêm nó vào đơn hàng. Biểu mẫu được đặt lại khi mặt hàng được thêm vào đơn hàng.
Ví dụ
Hình thức này là năng động. Nó thay đổi dựa trên sự lựa chọn của người dùng. Trước tiên, người dùng phải chọn danh mục, sau đó là sản phẩm và số lượng trước khi nút đặt hàng hiển thị và người dùng có thể đặt hàng.
Hãy tự mình thử »