Chào mừng các bạn đến với section 3 của vueJs cùng với Wolfactive tụi mình. Hôm nay chúng ta sẽ đi về biểu thức điều kiện và vòng lặp trong v-for dùng để render ra nội dung hen.
Mục tiêu và chuẩn bị:
Ở section này, chúng ta sẽ tìm hiểu về vòng lặp (v-for) và cách hoạt động của của biểu thức điều kiện (v-if) trong vuejs. Đầu tiên, cũng như các bài trước, Các bạn tải source tại đây để cùng follow theo tụi mình practice nhé.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goals">
<h2>My course goals</h2>
<input type="text" />
<button>Add Goal</button>
<p>No goals have been added yet - please start adding some!</p>
<ul>
<li>Goal</li>
</ul>
</section>
</body>
</html>
Javascript:
const app = Vue.createApp({
data() {
return {
goals: [],
};
},
});
app.mount('#user-goals');Và đây sẽ là giao diện của chúng ta ở section 3 này:
Ở giao diện này chúng ta sẽ làm chức năng add goal vào list, sử dụng v-if để check điều kiện. Bên cạnh đó, chúng ta sẽ làm thêm hai chức năng khác là thêm, xóa data trong list. Giờ mình cùng nhau bắt đầu nhé.
1/ v-if trong vue
Đối với các ngôn ngữ, biểu thức điều kiện if sẽ giúp chúng ta kiểm tra một điều kiện mà ta muốn, để có thể thực hiện đoạn code bên trong nó. Trong vueJs cũng vậy, bây giờ mình sẽ đặt v-if ngay tại thẻ p với điệu kiện là length của goals là 0.
<p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>Sau đó mình sẽ tạo thêm một methods để xử lí add goal và lấy dữ liệu nhập từ input
data() {
return {
goals: [],
valueInput:'',
};
},
methods: {
addGoal(value){
value !== '' && (this.goals.push(value));
}
},Và đây là đoạn code html mình bổ sung sau khi mình tạo method và thêm param vào data:
<section id="user-goals">
<h2>My course goals</h2>
<input v-model="valueInput" type="text" />
<button @click="addGoal(valueInput)">Add Goal</button>
<p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
<ul>
<li>Goal</li>
</ul>
</section>Các bạn có thể bổ sung thêm console.log trong method addGoal để theo dõi array Goals hen! Và đây là kết quả:
Như các bạn thấy, khi mình add goal, đoạn content trong thẻ p sẽ bị mất đi.
Mình sẽ làm thêm trường hợp nữa là else cho các bạn xem nhé:
<li v-if="goals.length === 0">Goal</li>
<li v-else>Goal had length > 0</li>Các bạn thấy đó, trường hợp nếu các bạn muốn else các bạn chỉ cần khai báo như trên là được. Còn nếu các bạn muốn check điều kiện ở else thì thay vì các bạn khai báo là v-else thì các bạn đổi lại là v-else-if=”Điều kiện”.
Vậy câu hỏi được đặt ra là “vậy nó có khác gì với display none hay không?”. Câu trả lời là có, khác với display:none, nó sẽ chỉ ẩn đi element mà bạn style lên nó, chứ element không bị mất đi hoàn toàn. Ngược lại, v-if của vuejs có phần vượt trội hơn, bởi nó sẽ ẩn mất hoàn toàn element nếu như điều kiện không thỏa.
Các bạn có thể xem ảnh dưới đây khi mình inspect vào thẻ p:
2/ v-for trong vueJs
Sau khi chúng ta add value input vào array được rồi thì ta sẽ lấy dữ liệu từ array ra nhỉ? Đây chính là lúc chúng ta sử dụng v-for để lấy dữ liệu ra. Cách sử dụng như sau bằng cách chúng ta đặt v-for lên element mà bạn muốn thực hiện vòng lặp. Trường hợp của mình thì, mình sẽ gọi v-for tại thẻ li trong ul.
<li v-else v-for="(goal,index) in goals" :key="goal">
{{goal}} - {{index}}
</li>Dòng lệnh trên là mình khai báo vòng lặp for đối với trường hợp kiểu dữ liệu là array nhé. goal có nghĩa là item trong trong goals, index là vị trí của value đó trong array. Nếu như các bạn không cần index thì chỉ cần ghi là goal in goals là được.
Ngoài ra mình có thêm một att trong thẻ li, đó là key, nhiệm vụ của key là gì thì mình sẽ nói ở mục kế nhé
Tạm thời gác qua vụ đó, vậy còn đối với kiểu dữ liệu là object thì sao nhỉ? Dưới đây là mình sẽ tạo một ví dụ mẫu đối với object nhé.
<li v-for="(item,k,i) in {'name':'wolfactive','job':'dev'}">
{{k}} - {{item}} - {{i}}
</li>
Đối với trường hợp là object, mình có bổ xung thêm một biến thứ 3 nữa. item là value, k tức là keyword của value đó, i là index của value trong array. Nhưng nếu đối với array có giá trị bên trong là dạng object thì các bạn làm như sau:
<li v-for="(item,i) in [{'name':'wolfactive','job':'dev'}]" :key="item.name">
{{item.name}} - {{item.job}} - {{i}}
</li>
key trong v-for
Trước khi mình giải thích key trong v-for thì mình sẽ tạo ra thêm function nữa dùng để xóa phần tử trong mảng nhé.
removeGoal(index){
this.goals.splice(index,1);
}Sau đó mình chỉnh sửa lại html nhé!
<ul>
<li v-if="goals.length === 0">Goal</li>
<li v-else v-for="(goal,index) in goals">
<p>{{goal}} - {{index}}</p>
<input type="text" />
<button @click="removeGoal(index)">Remove Goal</button>
</li>
</ul>Như các bạn thấy ở đầy mình đã xóa đi key trong v-for sau khi thỏa điều kiện thứ hai của v-if. Và dưới đây là mình demo khi xóa item trong array nhé.
Như các bạn thấy khi mình xóa item đi, giá trị của item bị xóa sẽ thay thế vào item phía sau. Lí do là vì tại mỗi item đó, nó sẽ hiểu là tại vị trí thứ 1 nó sẽ có kiểu dữ liệu là như vậy, và khi các bạn xóa nó đi, nó sẽ thay thế vào thằng phía sau.
Cách khắc phục là các bạn sử dụng key và đưa vào nó là một giá trị giống như id cho từng item vậy. Tuy nhiên các bạn không được đưa index của loop vào key nhé. Vì nó sẽ giống như kiểu mặc định ban đầu mình nói ở trên vậy. Trong trường hợp của mình thì mình đưa goal vào key.
Kết quả của mình sẽ như sau:
Tổng kết
Như vậy là đã xong section 3 rồi, qua section 3 của vuejs này chúng ta đã biết được thêm cách hoạt động của v-for, lí do nên sử dụng key trong v-for và cách hoạt động của nó. Bên cạnh đó chúng ta cũng đã biết được thêm v-if dùng để kiểm tra value và render ra element hoặc compoment. Ở section 4, chúng ta sẽ cùng nhau làm một game nho nhỏ để ôn lại kiến thức nhé. Hẹn gặp lại các bạn ở section sau. Và đừng quên like và share bài viết trên fanpage tụi mình nhé. Mỗi lượt share, like là động lực cho tụi mình ra bài nhiều hơn, nhanh hơn nha <3