Bài học này chúng ta sẽ tìm hiểu về list rendering trong Vue.js một thuật ngữ được Vue sử dụng để render dữ liệu theo vòng lặp. Cụ thể list rendering chúng ta tìm hiểu trong bài học này chính là v-for trong Vue.js. Nào cùng mình tìm hiểu về nó nhé các bạn.
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 sau:
v-for="item in list"
Trong đó:
- item là biến được gán cho các item có trong mảng.
- list là mảng dữ liệu các bạn cần duyệt.
VD1: Ví dụ dưới đây sẽ render tất cả các name có trong mảng student của ví dụ sau.
<div id="app"> <ul> <li v-for="list in student">{{list}}</li> </ul> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { student: [ 'Vũ Thanh Anh', 'Đậu Văn Lạc', 'Nguyễn Văn Chiến', 'Bành Thị Nở', 'Trần Thanh Cảnh', ] } }); </script>
Chạy Code cho kết quả như sau:
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.
VD2: Minh họa lấy cả index của phần tử mảng
<div id="app"> <ul> <li v-for="(list, index) in student">Name:{{list}}- Vị Trí thứ:{{index}}</li> </li> </ul> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { student: [ 'Vũ Thanh Anh', 'Đậu Văn Lạc', 'Nguyễn Văn Chiến', 'Bành Thị Nở', 'Trần Thanh Cảnh', ] } }); </script>
Chạy Code hiển thị kết quả như dưới đây
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.
VD3: Thay thế in bằng of
<div id="app"> <ul> <li v-for="list of student">{{list}}</li> </ul> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { student: [ 'Vũ Thanh Anh', 'Đậu Văn Lạc', 'Nguyễn Văn Chiến', 'Bành Thị Nở', 'Trần Thanh Cảnh', ] } }); </script>
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:
<div id="app"> <ul > <template v-for="list of student"> <li class="border"></li> <li>{{list}}</li> </template> </ul> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { student: [ 'Vũ Thanh Anh', 'Đậu Văn Lạc', 'Nguyễn Văn Chiến', 'Bành Thị Nở', 'Trần Thanh Cảnh', ] } }); </script>
3. Object v-for
Đặc biệt 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.
Ví dụ minh họa
<div id="app"> <ul > <template v-for="list in student"> <li>{{list}}</li> </template> </ul> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { student: { name : 'Dao Duy Nam', age: 32, address: 'Thai Binh' } } }); </script>
Kết quả hiển thị như sau:
Chúng ta cũng có thể lấy ra cả key và vị trí của phần tử trong object, đơn giả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 đó:
- list là giá trị của phần tử.
- key là key của phần tử đó.
- index là 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.
<ul> <li v-for="(list, key) in student">{{key}}={{list}}</li> </ul>
4. Range v-for.
Khi bạn muốn lặp dữ liệu với một số lần định sẵn thì vue.js cũng hỗ trợ chúng ta luôn.
Ví dụ dưới đây dùng v-for in ra các số từ 0 đến 10.
<ul> <li v-for="i in 10">{{i}}</li> </ul>
Bạn xem kết quả ở dưới đây:
5. v-for with v-if.
Bài toán đặt ra nếu cùng 1 node mà tồn tại cả v-for và v-if thì sao? Rất may là trong Vuejs 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.
Ví dụ đưới đây chỉ in ra các object có chứa key name.
<div id="app"> <ul > <li v-for="item in student" v-if="item.name">{{item}}</li> </ul> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { student: [ { name : 'Hoàn Hoa Tiên'}, { name : 'Nhu Tiên Cang'}, { age : 15}, { name : 'Thọ Tỉ Nam Sơn'}, ] } }); </script>
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.
Ví dụ f-if bao ngoài v-for
<div id="app"> <ul v-if="allow"> <li v-for="item in student">{{item}}</li> </ul> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { allow: true, student: [ { name : 'Ngon Tình Thật'}, { name : 'Trần Bình Thường'}, { name : 'Nguyễn Tú Chi'}, ] } }); </script>
Hoặc chúng ta cũng có thể đặt v-if vào trong tag template.
<template v-if="allow"> <ul> <li v-for="item in student">{{item}}</li> </ul> </template>
6. Displaying filtered or sorted results.
Đôi lúc chúng ta cần 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ể sử dụng computed property vào đó.
Ví dụ dùng computed để lọc các dữ liệu là số chẵn.
<div id="app"> <ul> <li v-for="item in evenNumber">{{item}}</li> </ul> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { numbers: [1,3,7,9,11,4,14,12,34] }, computed : { evenNumber: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }); } } }); </script>
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.
<div id="app"> <ul> <li v-for="item in evenNumber(numbers)">{{item}}</li> </ul> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { numbers: [11,31,25,91,6,4,22,12,34] }, methods : { evenNumber: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }); } } }); </script>
Tổng kết
Trên đây là toàn bộ cách dùng v-for một trong những list rendering trong Vue.js được sử dụng khá nhiều. Nếu có gì thắc mắc các bạn hãy comment ở bên dưới chúng mình sẽ giải đáp một cách sớm nhất nhé!
