VueJS: Render theo điều kiện

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

v-if

Trong các thư viện biên dịch template như Handlebars, thông thường chúng ta sẽ viết các khối điều kiện (conditional block) như sau:

{{#if ok}}
  <h1>Mọi việc đang ổn</h1>
{{/if}}

Để làm điều này với Vue, chúng ta sử dụng directive v-if:

<h1 v-if="ok">Mọi việc đang ổn</h1>

Chúng ta cũng có thể thêm khối “else” bằng v-else:

<h1 v-if="ok">Mọi việc đang ổn</h1>

<h1 v-else>Có một vài việc chưa ổng</h1>

Nhóm điều kiện với v-if trên thẻ <template>

Vì là một directive, v-if phải được dùng trên một phần tử đơn lẻ (single element) như <p>hoặc <div>. Nếu chúng ta muốn bật tắt một nhóm các phần tử thì sao? Chỉ cần dùng v-if trên một phần tử <template> với vai trò wrap (bọc) các phần tử lại thành một nhóm. Kết quả render cuối cùng sẽ không có phần tử <template> này.

<template v-if="ok">
  <h1>V1Study</h1>
  <p>Laravel</p>
  <p>VueJS</p>
</template>

v-else

Như trên đã nhắc đến, ta có thể dùng directive v-else để chỉ định một khối “else” cho v-if:

<div v-if="Math.random() > 0.5">
  Tài
</div>
<div v-else>
  Xỉu
</div>

Để được coi là hợp lệ, phần tử có v-else phải theo ngay sau một phần tử v-if hoặc v-else-if.

v-else-if

2.1.0+

Directive v-else-if đóng vai trò một khối “else if” cho v-if. Directive này có thể được dùng nhiều lần nối tiếp nhau:

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else-if="type === 'D'">D</div>
<div v-else>Chiến Sĩ không thể nhớ nổi</div>

Tương tự với v-else, phần tử với v-else-if phải theo ngay sau một phần tử v-if hoặc v-else-if.

Điều khiển việc tái sử dụng phần tử với key

Vue cố gắng render các phần tử một cách hiệu quả đến mức có thể, với một trong những cách làm là sử dụng lại thay vì tạo mới từ đầu. Ngoài việc giúp cho Vue thao tác cực kỳ nhanh, điều này còn mang lại một số lợi ích đáng kể khác. Ví dụ, nếu bạn cho phép người dùng được đăng nhập bằng username hoặc email:

<!DOCTYPE html>
<html>
<head>
    <script src="http://192.168.1.22:8098"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body style="font-size: 30px" id="app">
<section id="no-key-example" class="demo">
  <section>
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Nhập username">
    </template>
    <template v-else="">
      <label>Email</label>
      <input placeholder="Nhập email">
    </template>
  </section>
  <button @click="toggleLoginType">Thay đổi kiểu đăng nhập</button>
</section>
<script>
new Vue({
  el: '#no-key-example',
  data: {
    loginType: 'username'
  },
  methods: {
    toggleLoginType: function () {
      return this.loginType = this.loginType === 'username' ? 'email' : 'username'
    }
  }
})
</script>
</body>
</html>

Demo »

, thì việc chuyển đổi giá trị của loginType trong đoạn code trên sẽ không xóa đi thông tin mà người dùng đã điền vào. Vì cả hai <template> dùng các phần tử giống nhau, phần tử <input> sẽ không bị thay thế, chỉ có thuộc tính placeholder là thay đổi.

Tuy nhiên không phải lúc nào đây cũng là điều bạn mong muốn. Vì thế, Vue cung cấp một thuộc tính gọi là key. Khi dùng key với giá trị duy nhất (unique), về căn bản bạn đang dặn Vue “xem hai phần tử này là hoàn toàn khác nhau và đừng dùng lại”:

<!DOCTYPE html>
<html>
<head>
    <script src="http://192.168.1.22:8098"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body style="font-size: 30px" id="app">
<section id="key-example" class="demo">
  <section>
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Nhập username" key="username">
    </template>
    <template v-else="">
      <label>Email</label>
      <input placeholder="Nhập email" key="email">
    </template>
  </section>
  <button @click="toggleLoginType">Thay đổi kiểu đăng nhập</button>
</section>
<script>
new Vue({
  el: '#key-example',
  data: {
    loginType: 'username'
  },
  methods: {
    toggleLoginType: function () {
      return this.loginType = this.loginType === 'username' ? 'email' : 'username'
    }
  }
})
</script>
</body>
</html>

Demo »

Bây giờ thì hai phần tử <input> này sẽ được render lại từ đầu mỗi khi giá trị loginType được thay đổi.

Lưu ý rằng các phần tử <label> vẫn được sử dụng lại vì không có thuộc tính key.

v-show

Một lựa chọn nữa cho việc hiện hoặc ẩn một phần tử web theo điều kiện là directive v-show. Cách dùng v-show cũng tương tự với v-if:

<h1 v-show="ok">Xin chào!</h1>

Điểm khác biệt giữa v-show và v-if là phần tử được đánh dấu với v-show sẽ luôn luôn được render và chứa trong DOM; v-show chỉ bật tắt thuộc tính display của phần tử này.

v-show không hỗ trợ thẻ <template> và cũng không hoạt động với v-else.

v-if và v-show – khi nào dùng cái nào

v-if là render theo điều kiện “thật sự,” vì nó bảo đảm các event listener và component con bên trong khối điều kiện được hủy và khởi tạo lại trong quá trình bật/tắt.

v-if cũng lười biếng (lazy): nếu giá trị của điều kiện là false trong lần render đầu tiên, nó sẽ không làm gì cả - khối điều kiện sẽ không được render cho đến khi điều kiện trở thành true lần đầu tiên.

Trong khi đó, v-show đơn giản hơn nhiều - phần tử sẽ được render bất kể điều kiện là đúng hay sai, và chỉ được hiện/giấu đi bằng CSS.

Nói chung, v-if có phí tổn bật/tắt cao, còn v-show có phí tổn render cao. Vì thế, nếu bạn cần bật/tắt thường xuyên, hãy dùng v-show. Ngược lại, nếu điều kiện ít khi thay đổi trong suốt vòng đời của ứng dụng, hãy dùng v-if.

v-if dùng với v-for

Khi dùng chung với v-ifv-for có độ ưu tiên cao hơn. Xem chi tiết tại hướng dẫn về render danh sách.

» Tiếp: Render danh sách (list)
« Trước: Binding cho class và style
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!