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 đó:

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.

VD: Mình 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 Tài',
                'Nguyễn Thị Hồng Hạnh',
                'Nguyễn Văn A',
                'Lò Thị Vi Sóng',
                'Trần Như Nhộng',
            ]
        }
    });
</script>

Chạy Code

-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:

<div id="app">
    <ul>
    <li v-for="(list, index) in student">Name: {{ list }} - Vị Trí thứ: {{ index }}</li>
    </ul>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    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',
            ]
        }
    });
</script>

Chạy Code

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:

<div id="app">
    <ul>
    <li v-for="list of student">Name: {{ list }}</li>
    </ul>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    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',
            ]
        }
    });
</script>

Chạy Code

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 Tài',
            'Nguyễn Thị Hồng Hạnh',
            'Nguyễn Văn A',
            'Lò Thị Vi Sóng',
            'Trần Như Nhộng',
            ]
        }
    });
</script>

Chạy Code

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:

<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 : 'Vũ Thanh Tài',
                age: 22,
                address: 'Nam Định'
            }
        }
    });
</script>

Chạy Code

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 đó:

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>

Chạy Code

VD: in ra giá trị, key và index của các phần tử có trong object.

<ul>
    <li v-for="(list, key, index) in student">{{ key }} = {{ list }}, index = {{ index }}</li>
</ul>

Chạy Code

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.

<ul>
    <li v-for="i in 10">{{ i }}</li>
</ul>

Chạy Code

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.

<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 : 'Vũ Thanh Tài'},
                { name : 'Trần Như Nhộng'},
                { age : 22},
                { name : 'Nguyễn Văn B'},
            ]
        }
    });
</script>

Chạy Code

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:

<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 : 'Vũ Thanh Tài'},
            { name : 'Trần Như Nhộng'},
            { name : 'Nguyễn Văn B'},
            ]
        }
    });
</script>

Chạy Code

Hoặc bạn 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>

Chạy Code

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:

<div id="app">
    <ul>
        <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: {
            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'})
</script>

Chạy Code

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.

<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,5,9,6,4,2,12,34]
        },
        computed : {
            evenNumber: function () {
                return this.numbers.filter(function (number) {
                  return number % 2 === 0
              });
            }
        }
    });
</script>

Chạy Code

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:

<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: [1,3,5,9,6,4,2,12,34]
        },
        methods : {
            evenNumber: function (numbers) {
                return numbers.filter(function (number) {
                  return number % 2 === 0
              });
            }
        }
    });
</script>

Chạy Code

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ể.