Ngày 06 - Render danh sách với v-for
Hello các bạn, lại là mình đây, lại một ngày trôi qua thật là nhanh, hôm nay chúng ta sẽ tìm hiểu về v-for - một chỉ thị của vuejs dùng như vòng for của các ngôn ngữ lập trình vậy á :v Như vậy cho dễ hiểu ha, sau đây, chúng ta sẽ cùng nhau đi sâu vào nó.
Dạng thông tin kiểu danh sách là một trong những dạng giao diện phổ biến nhất trong các ứng dụng. Các bạn có thể thấy rất nhiều đúng không, ví dụ như trên chính forum của mình, có dạng danh sách rất là nhiều luôn.
Các bạn thấy là mỗi danh sách sẽ có một kiểu định dạng riêng, nhưng trong mỗi danh sách thì mỗi phần tử đều có cấu trúc giống nhau, ví dụ ở đây, ta xét danh sách bên trái, các phần tử sẽ có một icon biểu thị, một dòng tiêu đề, một dòng mô tả, và phía sau là một bài post chẳng hạn. Nếu danh sách có rất nhiều phần tử mà bạn đi code từng phần tử như vậy thì thật mất thời gian và công sức đúng không? Do đó, chúng ta sẽ tìm hiểu cái cách mà Vuejs có thể xử lý để hiển thị các dữ liệu có chung cấu trúc nhưng dữ liệu thì linh động nhé.
Chỉ thị v-for
Ở đây chúng ta có cấu trúc của v-for như hình vẽ, các bạn cứ coi items là danh sách chứa tất cả dữ liệu còn item là một cái biến đại diện đứng ra để lấy từng dòng dữ liệu ở trong toàn bộ dữ liệu đó.
Bây giờ chúng ta cùng đi qua một ví dụ đơn giản nhất về v-for:
Nhưng trước hết giả sử ta có một file html với các dữ liệu static như này:
Mã:
<html>
<head>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div id="app">
<h1>30 days Vuejs with TuiHocWeb.com</h1>
<ul>
<li>1</li>
<li>10</li>
<li>100</li>
<li>1000</li>
<li>10000</li>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>Kết quả hiển thị:
Như vậy nếu ta chuyển qua Vuejs, ta sẽ viết một file main.js như sau:
JavaScript:
new Vue({
el: '#app',
data: {
numbers: [1, 10, 100, 1000, 10000],
},
});Chúng ta có thể tránh việc lặp lại thẻ
<li> bằng cách sử dụng v-for với data collection của chúng ta là mảng numbers, alias chúng ta chọn sẽ là number:
HTML:
<html>
<head>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div id="app">
<h1>30 days Vuejs with TuiHocWeb.com</h1>
<ul>
<li v-for="number in numbers">{{ number }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>Kết quả:
Oke, như vậy là kết quả cũng không thay đổi gì, nhưng ta tiết kiệm được thời gian và công sức để viết ra các phần tử của danh sách numbers này.
Thuộc tính key
Trước hết chúng ta cùng bàn luận qua một vấn đề trong dữ liệu danh sách, khi ứng dụng của chúng ta cập nhật hoặc thay đổi các phần tử của danh sách, theo mặc định, Vue sẽ cập nhật dữ liệu của phần tử đó, thay vì di chuyển nó tới vị trí phù hợp. Điều này hoàn toàn không ảnh hưởng với những trường hợp bình thường. Nhưng khi các phần tử này phụ thuộc vào một trạng thái của một phần tử con trong nó chẳng hạn, sẽ có một số lỗi xảy ra ngoài ý muốn.Chúng ta cùng đi qua một ví dụ để hiểu rõ hơn về điều này:
Chúng ta có thêm một ô input đầu vào:
HTML:
<html>
<head>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div id="app">
<h1>30 days Vuejs with TuiHocWeb.com</h1>
<ul>
<li v-for="number in numbers">
<p>{{ number }}</p>
<input placeholder="type something..." />
</li>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>Ví dụ bây giờ ứng dụng của chúng ta có thêm một tính năng là sắp xếp ngẫu nhiên các phần tử trong danh sách đó, cụ thể ở đây là danh sách các số có sẵn như ở ví dụ trước, các số này được lưu trong mảng numbers. Ta sẽ thêm một nút để thực hiện hành động xáo trộn các số này một cách ngẫu nhiên:
HTML:
<html>
<head>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div id="app">
<h1>30 days Vuejs with TuiHocWeb.com</h1>
<ul>
<li v-for="number in numbers">
<p>{{ number }}</p>
<input placeholder="type something..." />
</li>
</ul>
<button @click="shuffle">Shuffle!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/lodash/lodash.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>
