Chào mừng đến với Cafedev! Trong thế giới phát triển web hiện đại, việc làm việc với biểu mẫu và các đầu vào là một phần không thể thiếu. Với Vue.js, chúng ta có sẵn các cơ chế mạnh mẽ để ràng buộc dữ liệu giữa các phần tử đầu vào và trạng thái JavaScript. Hãy cùng khám phá cách sử dụng Vuejs with Form Input Bindings để tạo ra các biểu mẫu linh hoạt và dễ dàng quản lý trạng thái dữ liệu!
Khi làm việc với các biểu mẫu trên giao diện người dùng, chúng ta thường cần đồng bộ hóa trạng thái của các phần tử đầu vào của biểu mẫu với trạng thái tương ứng trong JavaScript. Việc kết nối thủ công các ràng buộc giá trị và lắng nghe sự kiện thay đổi có thể gây phiền toái:
<input
:value="text"
@input="event => text = event.target.value">Chỉ thị v-model giúp chúng ta đơn giản hóa việc trên thành:
<input v-model="text">Ngoài ra, v-model có thể được sử dụng trên các đầu vào của các loại khác nhau, phần tử , và . Nó tự động mở rộng thành các cặp thuộc tính và sự kiện DOM khác nhau dựa trên phần tử mà nó được sử dụng:
- <input> với các loại văn bản và phần tử <textarea> sử dụng thuộc tính
valuevà sự kiệninput; <input type="checkbox">and<input type="radio">sử dụng thuộc tínhcheckedvà sự kiệnchange;<select>usesvaluenhư một prop vàchangenhư một sự kiện.
tip Lưu ý v-model sẽ bỏ qua các thuộc tính value, checked hoặc selected ban đầu được tìm thấy trên bất kỳ phần tử biểu mẫu nào. Nó luôn coi trạng thái JavaScript được ràng buộc hiện tại là nguồn tin chính. Bạn nên khai báo giá trị ban đầu trên phía JavaScript, sử dụng
Nội dung chính
1. Sử Dụng Cơ Bản
1.1 Văn Bản
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />Thử Nó trong play
Tips Lưu ý Đối với các ngôn ngữ yêu cầu một IME (Tiếng Trung, Tiếng Nhật, Tiếng Hàn, v.v.), bạn sẽ nhận thấy rằng v-model không được cập nhật trong quá trình sáng tạo IME. Nếu bạn muốn phản ứng với các cập nhật này cũng, hãy sử dụng người nghe sự kiện input và ràng buộc value của riêng bạn thay vì sử dụng v-model.
1.2 Văn Bản Đa Dòng
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>Lưu ý rằng việc nội suy bên trong <textarea> sẽ không hoạt động. Sử dụng v-model thay vào đó.
<!-- bad -->
<textarea>{{ text }}</textarea>
<!-- good -->
<textarea v-model="text"></textarea>1.3 Checkbox
Một checkbox đơn, giá trị boolean:
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>Chúng ta cũng có thể ràng buộc nhiều checkbox vào cùng một mảng hoặc giá trị Set:
const checkedNames = ref([])<div>Checked names: {{ checkedNames }}</div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>Trong trường hợp này, mảng checkedNames sẽ luôn chứa các giá trị từ các ô được chọn hiện tại.
Thử Nó trong Play
1.4 Radio
<div>Picked: {{ picked }}</div>
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>1.5 Select
Chọn đơn:
<div>Selected: {{ selected }}</div>
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>tip Lưu ý Nếu giá trị ban đầu của biểu thức v-model không khớp với bất kỳ tùy chọn nào, phần tử sẽ hiển thị ở trạng thái “không chọn”. Trên iOS điều này sẽ làm cho người dùng không thể chọn mục đầu tiên vì iOS không kích hoạt sự kiện thay đổi trong trường hợp này. Do đó, được khuyến nghị cung cấp một tùy chọn bị vô hiệu hóa với một giá trị rỗng, như được minh họa trong ví dụ trên
Chọn nhiều (ràng buộc với mảng):
<div>Selected: {{ selected }}</div>
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>ABC
Tùy chọn chọn có thể được phát sinh động với v-for:
const selected = ref('A')
const options = ref([
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
])export default {
data() {
return {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
}
}<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<div>Selected: {{ selected }}</div>2. Ràng Buộc Giá Trị
Đối với radio, checkbox và các tùy chọn select, các giá trị ràng buộc v-model thường là các chuỗi tĩnh (hoặc boolean đối với checkbox):
<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle" />
<!-- `selected` is a string "abc" when the first option is selected -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>Nhưng đôi khi chúng ta có thể muốn ràng buộc giá trị vào một thuộc tính động trên thể hiện hiện tại đang hoạt động. Chúng ta có thể sử dụng v-bind để đạt được điều đó. Ngoài ra, việc sử dụng v-bind cho phép chúng ta ràng buộc giá trị đầu vào với các giá trị không phải là chuỗi.
2.1 Checkbox
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no" />true-value và false-value là các thuộc tính chỉ dành riêng cho Vue và chỉ hoạt động với v-model. Ở đây, giá trị của thuộc tính toggle sẽ được đặt thành 'yes' khi ô được chọn, và đặt thành 'no' khi không được chọn. Bạn cũng có thể ràng buộc chúng với các giá trị động bằng cách sử dụng v-bind:
<input
type="checkbox"
v-model="toggle"
:true-value="dynamicTrueValue"
:false-value="dynamicFalseValue" />tip Mẹo Các thuộc tính true-value và false-value không ảnh hưởng đến thuộc tính value của đầu vào, vì trình duyệt không bao gồm các ô không được chọn trong việc gửi biểu mẫu. Để đảm bảo rằng một trong hai giá trị được gửi trong một biểu mẫu (ví dụ, “yes” hoặc “no”), hãy sử dụng đầu vào radio thay vì checkbox.
2.2 Radio
<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />pick sẽ được đặt thành giá trị của first khi ô radio đầu tiên được chọn, và được đặt thành giá trị của second khi ô thứ hai được chọn.
2.3 Các Tùy chọn Select
<select v-model="selected">
<!-- inline object literal -->
<option :value="{ number: 123 }">123</option>
</select>v-model cũng hỗ trợ các ràng buộc giá trị của các giá trị không phải là chuỗi! Trong ví dụ trên, khi tùy chọn được chọn, selected sẽ được đặt thành giá trị đối tượng của { number: 123 }.
3. Các Bộ Điều Chỉnh
3.1 .lazy
Theo mặc định, v-model đồng bộ đầu vào với dữ liệu sau mỗi sự kiện input (ngoại trừ quá trình sáng tạo IME như đã nói ở trên). Bạn có thể thêm bộ điều chỉnh lazy để thay thế đồng bộ sau các sự kiện change:
<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" />3.2 .number
Nếu bạn muốn đầu vào của người dùng được tự động ép kiểu thành số, bạn có thể thêm bộ điều chỉnh number vào các đầu vào được quản lý bởi v-model của bạn:
<input v-model.number="age" />Nếu giá trị không thể được phân tích với parseFloat(), thì giá trị gốc sẽ được sử dụng thay vào đó.
Bộ điều chỉnh number sẽ được áp dụng tự động nếu đầu vào có type="number".
3.3.trim
Nếu bạn muốn khoảng trắng từ đầu vào của người dùng được tự động cắt bỏ, bạn có thể thêm bộ điều chỉnh trim vào các đầu vào được quản lý bởi v-model của bạn:
<input v-model.trim="msg" />4. v-model với các Component
Nếu bạn vẫn chưa quen với các thành phần của Vue, bạn có thể bỏ qua phần này tạm thời.
Các loại đầu vào tích hợp sẵn trong HTML không luôn đáp ứng được nhu cầu của bạn. May mắn thay, các thành phần Vue cho phép bạn xây dựng các đầu vào có thể tái sử dụng với hành vi hoàn toàn tùy chỉnh. Những đầu vào này thậm chí còn hoạt động với v-model! Để biết thêm thông tin, đọc về Sử Dụng với <codev-model> trong hướng dẫn về Các Component.
Cảm ơn bạn đã đọc bài viết của chúng tôi về Vuejs with Form Input Bindings trên Cafedev. Hy vọng rằng thông tin bạn nhận được đã giúp bạn hiểu rõ hơn về cách sử dụng Vue.js để làm việc với các đầu vào trong biểu mẫu và tạo ra các ứng dụng web linh hoạt và dễ quản lý. Đừng ngần ngại khám phá thêm nhiều nội dung hữu ích khác trên Cafedev và tiếp tục học hỏi và phát triển kỹ năng lập trình của bạn!
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
