Điện thoại/ Zalo
0389934723
Bài 7: List rendering trong Vue.js
Ở bài trước chúng ta đã tìm hiểu xong về conditional trong Vue.js rồi. Bài này chúng ta sẽ tiếp tục tìm hiểu về list rendering trong Vue.js.
-Nghe đến tên list rendering chắc các bạn cũng thấy lạ lạ đúng không, nhưng đó thực ra chỉ là một thuật ngữ mà Vue.js đặt tên cho hành động dùng vòng lặp để render dữ liệu thôi, và cụ thể trong bài này chúng ta sẽ tìm hiểu về v-for trong Vue.js.
1, v-for.
Trong Vue.js chúng ta có thể sử dụng v-for directive để hiển thị ra các item có trong mảng với cú pháp:
v-for="item in list"
Trong đó:
itemlà biến được gán cho các item có trong mảng.listlà mảng dữ liệu các bạn cần duyệt.
VD: Mình sẽ render tất cả các name có trong mảng student của ví dụ sau.
- {{ list }}
var app = new Vue({
el: '#app',
data: {
student: [
'Vũ Thanh Tài',
'Nguyễn Thị Hồng Hạnh',
'Nguyễn Văn A',
'Lò Thị Vi Sóng',
'Trần Như Nhộng',
]
}
});
–Nếu như bạn muốn lấy ra index của phần tử nữa thì bạn sử dụng cú pháp sau:
v-for="(item, index) in list"
Khi đó tham số index sẽ chứa chỉ số index của phần tử trong mảng.
VD:
- Name: {{ list }} - Vị Trí thứ: {{ index }}
var app = new Vue({
el: '#app',
data: {
student: [
'Vũ Thanh Tài',
'Nguyễn Thị Hồng Hạnh',
'Nguyễn Văn A',
'Lò Thị Vi Sóng',
'Trần Như Nhộng',
]
}
});
Và nếu như bạn quen sử dụng cú pháp của vòng lặp trong javascript thông thường thì bạn cũng có thể thay thế in bằng of.
VD:
- Name: {{ list }}
var app = new Vue({
el: '#app',
data: {
student: [
'Vũ Thanh Tài',
'Nguyễn Thị Hồng Hạnh',
'Nguyễn Văn A',
'Lò Thị Vi Sóng',
'Trần Như Nhộng',
]
}
});
2, Template v-for.
-Trong trường hợp bạn muốn render ra 1 nhóm tag trong mỗi lần lặp thì Vue.js cũng hỗ trợ bạn sử dụng tag template để gom nhóm các tag đó giống như v-if.
VD:
- {{ list }}
var app = new Vue({
el: '#app',
data: {
student: [
'Vũ Thanh Tài',
'Nguyễn Thị Hồng Hạnh',
'Nguyễn Văn A',
'Lò Thị Vi Sóng',
'Trần Như Nhộng',
]
}
});
3, Object v-for.
Và trong Vue.js bạn cũng có thể dùng v-for để duyệt các phần tử bên trong object được.
VD:
- {{ list }}
var app = new Vue({
el: '#app',
data: {
student: {
name : 'Vũ Thanh Tài',
age: 22,
address: 'Nam Định'
}
}
});
Và nếu như bạn muốn lấy ra cả key và vị trí của phần tử trong object thì bạn chỉ cần thêm tiếp các đối số theo cú pháp sau:
v-for="(list, key, index) in object"
Trong đó:
listlà giá trị của phần tử.keylà key của phần tử đó.indexlà thứ tự của phần tử đó trong object (tính từ 0).
VD: in ra key và giá trị của key đó trong object.
- {{ key }} = {{ list }}
VD: in ra giá trị, key và index của các phần tử có trong object.
- {{ key }} = {{ list }}, index = {{ index }}
4, Range v-for.
Bên cạnh đó, khi bạn muốn lặp dữ liệu với một số lần các định sẵn thì vue.js cũng hỗ trợ chúng ta luôn.
VD: Dùng v-for in ra các số từ 0 đến 10.
- {{ i }}
5, v-for with v-if.
-Trên cùng 1 node nếu như tồn tại cả v-for và v-if thì chương trình sẽ ưu tiên v-for trước, điều này rất có lợi nếu như bạn muốn kiểm tra sự tồn tại của một nhánh nào đó trong vòng lặp.
VD: Chỉ in ra các object có chứa key name.
- {{ item }}
var app = new Vue({
el: '#app',
data: {
student: [
{ name : 'Vũ Thanh Tài'},
{ name : 'Trần Như Nhộng'},
{ age : 22},
{ name : 'Nguyễn Văn B'},
]
}
});
Tương tự nếu như bạn muốn xác định sự tồn tại của vòng lặp thì bạn chỉ cần đặt v-if bao ngoài v-for là được.
VD:
- {{ item }}
var app = new Vue({
el: '#app',
data: {
allow: true,
student: [
{ name : 'Vũ Thanh Tài'},
{ name : 'Trần Như Nhộng'},
{ name : 'Nguyễn Văn B'},
]
}
});
Hoặc bạn cũng có thể đặt v-if vào trong tag template.
- {{ item }}
6, Array change detection.
Cũng giống như thường lệ, đối với mảng thì bạn cũng có thể sự dụng các hàm liên quan để tác động vào mảng (xem danh sách các hàm xử lý mảng trong javascript) từ đó dữ liệu nếu như có sự thay đổi thì vue.js cũng cập nhật lại danh sách của v-for ngay lập tức.
VD:
- {{ item }}
var app = new Vue({
el: '#app',
data: {
student: [
{ name : 'Vũ Thanh Tài'},
{ name : 'Trần Như Nhộng'},
{ name : 'Nguyễn Văn B'},
]
}
});
app.student.push({name: 'Lo Vi Song'})
7, Displaying filtered or sorted results.
-Đôi lúc chúng ta cần thay sắp xếp hoặc lọc dữ liệu mà không thực sự muốn thay đổi dữ liệu thì bạn cũng có thể áp dụng computed property vào đó.
VD: Dùng computed để lọc các dữ liệu là số chẵn.
- {{ item }}
var app = new Vue({
el: '#app',
data: {
numbers: [1,3,5,9,6,4,2,12,34]
},
computed : {
evenNumber: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
});
}
}
});
Tương tự như thế bạn cũng có thể sử dụng phương thức để có thể sử dụng lại nhiều lần hơn.
VD:
- {{ item }}
var app = new Vue({
el: '#app',
data: {
numbers: [1,3,5,9,6,4,2,12,34]
},
methods : {
evenNumber: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
});
}
}
});
8, Lời kết.
-Trong phần này mình đã bớt đi một số phần đòi hỏi phải có kiến thức của các phần sau như component, đến khi tìm hiểu đến phần đó mình sẽ trình bày luôn 1 thể.
