Biểu mẫu Vue
Vue cung cấp cho chúng ta một cách dễ dàng để cải thiện trải nghiệm người dùng với biểu mẫu bằng cách thêm chức năng bổ sung như khả năng phản hồi và xác thực biểu mẫu.
Vue sử dụng lệnh v-model
khi xử lý các biểu mẫu.
Hình thức đầu tiên của chúng tôi với Vue
Hãy bắt đầu với một ví dụ về danh sách mua sắm đơn giản để xem cách Vue có thể được sử dụng khi tạo biểu mẫu.
Để biết thêm thông tin về biểu mẫu trong HTML, với các thẻ và thuộc tính liên quan, hãy xem hướng dẫn về Biểu mẫu HTML của chúng tôi .
1. Thêm các thành phần biểu mẫu HTML tiêu chuẩn:
<form>
<p>Add item</p>
<p>Item name: <input type="text" required></p>
<p>How many: <input type="number"></p>
<button type="submit">Add item</button>
</form>
2. Tạo phiên bản Vue với tên mặt hàng, số lượng và danh sách mua sắm hiện tại, đồng thời sử dụng v-model
để kết nối đầu vào của chúng ta với nó.
<div id="app">
<form>
<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>
<button type="submit">Add item</button>
</form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
shoppingList: [
{ name: 'Tomatoes', number: 5 }
]
}
}
})
app.mount('#app')
</script>
3. Gọi phương thức để thêm một mục vào danh sách mua sắm và ngăn việc làm mới trình duyệt mặc định khi gửi.
<form v-on:submit.prevent="addItem">
4. Tạo phương thức thêm mặt hàng vào danh sách mua sắm và xóa biểu mẫu:
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
}
this.shoppingList.push(item);
this.itemName = null
this.itemNumber = null
}
}
5. Sử dụng v-for
để hiển thị danh sách mua sắm được cập nhật tự động bên dưới biểu mẫu:
<p>Shopping list:</p>
<ul>
<li v-for="item in shoppingList">{{item.name}}, {{item.number}}</li>
</ul>
Dưới đây là mã cuối cùng cho biểu mẫu Vue đầu tiên của chúng tôi.
Ví dụ
Trong ví dụ này, chúng ta có thể thêm các mặt hàng mới vào danh sách mua sắm.
<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>
<button type="submit">Add item</button>
</form>
<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,
shoppingList: [
{ name: 'Tomatoes', number: 5 }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử » Lưu ý v-model
ràng buộc hai chiều cung cấp trong ví dụ trên:
-
v-model
cập nhật dữ liệu phiên bản Vue khi đầu vào HTML thay đổi -
v-model
cũng cập nhật đầu vào HTML khi dữ liệu phiên bản Vue thay đổi
Để tìm hiểu thêm về v-model
và xem thêm các ví dụ về biểu mẫu, hãy nhấp vào 'Tiếp theo'.