Ra mắt hai series mới cực hot Trí tuệ nhân tạo A đến ZPython công cụ không thể thiếu khi nghiên cứu Data science, Machine learning.

Cú pháp điều kiện v-if và v-show

Trong bài trước chúng ta đã làm quen với khái niệm câu lệnh (directive) trong Vue, với mỗi ngôn ngữ các cú pháp in, điều kiện, vòng lặp là những cú pháp cơ bản nhất. Bài viết này sẽ đi sâu vào các câu lệnh điều kiện là những chỉ thị có điều kiện giúp cho bộ biên dịch của Vue.js có thể ra quyết định khi nào thì sinh mã HTML như thế này, khi nào thì làm việc khác... Một câu hỏi đặt ra, trong biểu thức Javascript chúng ta có thể đưa vào điều kiện, vậy cần gì đến các câu lệnh v-if, v-show?

v-if

Sử dụng câu lệnh v-if trong các thẻ HTML cho phép render các phần tử và nội dung theo các điều kiện dựa trên dữ liệu thuộc tính hoặc các biến trong Javascript. Ví dụ, người dùng nhập vào họ tên, giới tính, hiển thị câu chào thích hợp với các màu sắc theo giới tính.

<!DOCTYPE html>
<html>
<head>
    <title>Ví dụ về v-if - Allaravel.com</title>
</head>
<body>
    <div id="app">
        <h1 v-if="user.gender == 1 && user.name != null" style="color: red;">Chào anh {{ user.name }}</h1>
        <h1 v-else-if="user.gender == 2 && user.name != null" style="color: green">Chào chị {{ user.name }}</h1>
        <h1 v-else style="color: blue">Ví dụ về v-if</h1>
        <br>
        <label>Họ và tên</label>
        <input v-model="user.name" placeholder="Nhập vào tên bạn">
        <br>
        <label>Giới tính</label>
        <select v-model="user.gender">
            <option value="1">Nam</option>
            <option value="2">Nữ</option>
        </select>
    </div>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                user: {}
            }
        })
    </script>
</body>
</html>

[jsfiddle url="https://jsfiddle.net/allaravel/betgLdox/" height="300px" include="result,html,js" font-color="39464E" menu-background-color="FFFFFF" code-background-color="f3f5f6" accent-color="1C90F3"]

Ví dụ trên khá là dễ hiểu, khi tên người dùng không rỗng và giới tính nam được lựa chọn, trình biên dịch sẽ kiểm tra và thấy thẻ <h1> dưới đây thỏa mãn:

<h1 v-if="user.gender == 1 && user.name != null" style="color: red;">Chào anh {{ user.name }}</h1>

Giống như các ngôn ngữ lập trình, cấu trúc rẽ nhánh luôn có các kiểm tra điều kiện khác là else và elseif, Vue.js cũng vậy, nó có các câu lệnh v-else, v-else-if.

v-show

Một tùy chọn khác để render có điều kiện là sử dụng câu lệnh v-show, nó khác với v-if ở chỗ v-show render tất cả các phần tử html và sau đó các phần tử này hiển thị hay không thông qua thuộc tính CSS display:none hoặc không có thuộc tính này. Ví dụ ở trên được viết lại như sau:

<!DOCTYPE html>
<html>
<head>
    <title>Ví dụ về v-show - Allaravel.com</title>
</head>
<body>
    <div id="app">
        <h1 v-show="user.gender == 1 && user.name != null" style="color: red;">Chào anh {{ user.name }}</h1>
        <h1 v-show="user.gender == 2 && user.name != null" style="color: green">Chào chị {{ user.name }}</h1>
        <h1 v-show="user.name == null" style="color: blue">Ví dụ về v-show</h1>
        <br>
        <label>Họ và tên</label>
        <input v-model="user.name" placeholder="Nhập vào tên bạn">
        <br>
        <label>Giới tính</label>
        <select v-model="user.gender">
            <option value="1">Nam</option>
            <option value="2">Nữ</option>
        </select>
    </div>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                user: {}
            }
        })
    </script>
</body>
</html>

Chạy ví dụ này và xem mã nguồn HTML bạn sẽ thấy khác so với ví dụ đầu là cả ba thẻ <h1> đều được tạo ra nhưng khi chưa nhập liệu hai thẻ <h1> đầu có thuộc tính display:none. Khi nhập liệu các giá trị thì các thẻ h1 này có thể được thêm hoặc bớt đi thuộc tính display:none để ẩn đi hoặc hiện lên cho phù hợp.

Ví dụ v-show

Bài tập

Thiết kế một form đăng nhập gồm địa chỉ email và mật khẩu, nếu dữ liệu nhập vào như sau:

  • Địa chỉ email: test@allaravel.com
  • Mật khẩu: 123456

Hiển thị lời chào "Bạn đã đăng nhập thành công", nếu không hiển thị lời cảnh báo "Thông tin đăng nhập sai, vui lòng thử lại".

Bài tập v-if

Bạn nên thực hiện các bài tập đơn giản này, nó giúp cho việc nhớ kiến thức lâu và vận dụng kiến thức tốt hơn. Cố gắng đừng xem lời giải nếu bạn có thể tự thực hiện được.

Lời giải

<!DOCTYPE html>
<html>
<head>
    <title>Bài tập sử dụng v-if Vuejs - Allaravel.com</title>
</head>
<body>
    <div id="app">
        <h1 v-if="user.email == 'test@allaravel.com' && user.password == '123456'" style="color: green;">Chào mừng {{ user.email }} đã đăng nhập thành công!</h1>
        <h1 v-if="(user.email != 'test@allaravel.com' && user.email != null) || (user.password != '123456' && user.password != null)" style="color: red;">Thông tin đăng nhập sai, vui lòng thử lại!</h1>
        <br>
        <div v-if="user.email != 'test@allaravel.com' || user.password != '123456'">
            <label>Địa chỉ email</label>
            <input type="text" v-model="user.email">
            <br>
            <label>Mật khẩu</label>
            <input type="password" v-model="user.password">
        </div>

    </div>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                user: {}
            }
        })
    </script>
</body>
</html>

Kết quả như sau:

[jsfiddle url="https://jsfiddle.net/allaravel/wL2jfgfn/" height="300px" include="result,html,js" font-color="39464E" menu-background-color="FFFFFF" code-background-color="f3f5f6" accent-color="1C90F3"]


CÁC BÀI VIẾT KHÁC

FirebirD

Đam mê Toán học, Lập trình. Sở thích chia sẻ kiến thức, Phim hài, Bóng đá, Cà phê sáng với bạn bè.

Mẫu cú pháp câu lệnh trong Vue.js

Xử lý danh sách với v-for Phần 1

7 Bình luận trong "Cú pháp điều kiện v-if và v-show"

  1. nguyen văn toàn

    1 year ago

    Phản hồi
    Ví dụ về v-if - Allaravel.com Chào anh {{ user.name }} Chào chị {{ user.name }} Ví dụ về v-if Họ và tên Giới tính Nam Nữ new Vue({ el: '#app', data: { user: {} } }) ------------ giải thíc cho em chỗ này tại sao user lại là như này : data: { user: {} }
    1. FirebirD

      1 year ago

      Phản hồi
      Đoạn này mình khai báo thuộc tính cấp 1 user của data, các thuộc tính ở mức sâu (cấp 2, 3...) hơn không cần khai báo, khi mình map với ô nhập liệu input thông qua v-model. Chú ý khi tham chiếu các thuộc tính cấp 1 cần khai báo từ đầu, các thuộc tính con cấp 2, 3... có gán trong lúc chạy
      1. Alex

        1 year ago

        Phản hồi
        Các thuộc tính con cấp 1, 2, 3 nằm ở bài nào mà mình đọc tới đây rồi vẫn ko thấy giới thiệu mà bạn lại dám xài mà không giải thích trong bài nhỉ ?
  2. big pork

    1 year ago

    Phản hồi
    ý nghĩa của dòng này là gì anh : trong khi ko cần dòng đó thì nó vẫn chạy.
    1. FirebirD

      1 year ago

      Phản hồi
      Chưa hiểu ý bạn hỏi gì?
  3. Ki

    1 month ago

    Phản hồi

    Hi, minh co the co email cua ban de hoi ve vue js duoc khong?

    1. FirebirD

      1 month ago

      Phản hồi

      Bạn gửi vào allaravel.com@gmail.com nhé!

Thêm bình luận