Vue, cách sử dụng v-model

Chỉ thị v-model Vue cho phép chúng ta tạo ràng buộc hai chiều. học để sử sụng nó như thế nào

Cácv-modelChỉ thị Vue cho phép chúng ta tạo ràng buộc hai chiều.

Ví dụ, bạn có thể liên kết một phần tử đầu vào biểu mẫu và làm cho nó thay đổi thuộc tính dữ liệu Vue khi người dùng thay đổi nội dung của trường:

<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>

<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>

Công cụ sửa đổi chỉ thị tiện dụng

Để cập nhật mô hình khi sự kiện thay đổi xảy ra và không phải bất kỳ lúc nào người dùng nhấn phím, bạn có thể sử dụngv-model.lazyThay vì chỉv.model.

Làm việc với các trường đầu vào,v-model.trimhữu ích vì nó tự động loại bỏ khoảng trắng.

Và nếu bạn chấp nhận một số thay vì một chuỗi, hãy đảm bảo rằng bạn sử dụngv-model.number.

Thuộc tính lồng nhau

Giả sử bạn có một giỏ hàng và bạn có một thành phần chứa một biểu mẫu để thêm sản phẩm:

<template>
  <div class="">
    <h1>Add Product</h1>
    <label>Name</label>: <input>
    <label>Description</label>: <textarea></textarea>
    <button @click="addProduct">Add</button>
  </div>
</template>
<script>
export default {
name: ‘AddProduct’,
data() {
return {
product: {
name: ‘’,
description: ‘’
}
}
},
methods: {
addProduct() {
console.log(this.product)
}
}
}
</script>

Để làm cho biểu mẫu cập nhật các thuộc tính bên trong củaproductgiá trị trạng thái, bạn sử dụngproduct.*:

<label>Name</label>: <input v-model="product.name">
<label>Description</label>: <textarea v-model="product.description"></textarea>

Tải xuống miễn phí của tôiSổ tay Vue

Vue, cách sử dụng v-model

Chỉ thị v-model Vue cho phép chúng ta tạo ràng buộc hai chiều. học để sử sụng nó như thế nào

Công cụ sửa đổi chỉ thị tiện dụng

Thuộc tính lồng nhau

Các hướng dẫn vue khác: