Chỉ thị Vue v-if

Kết xuất có điều kiện trong Vue

Kết xuất có điều kiện trong Vue được thực hiện bằng cách sử dụng các lệnh v-if , v-else-if và v-else .

Hiển thị có điều kiện là khi phần tử HTML chỉ được tạo nếu điều kiện là đúng, tức là tạo văn bản "Còn hàng" nếu một biến là 'true' hoặc 'Không còn hàng' nếu biến đó là 'sai'.

Điều kiện trong Vue

Điều kiện hay "câu lệnh if" là điều gì đó true hoặc false .

Một điều kiện thường là sự kiểm tra so sánh giữa hai giá trị như trong ví dụ trên để xem liệu giá trị này có lớn hơn giá trị kia hay không.

• Chúng tôi sử dụng các toán tử so sánh như < , >= hoặc !== để thực hiện các kiểm tra như vậy.

• Kiểm tra so sánh cũng có thể được kết hợp với các toán tử logic như && hoặc || .

• Hãy truy cập trang hướng dẫn JavaScript của chúng tôi để tìm hiểu thêm về cách so sánh JavaScript.

Chúng ta có thể sử dụng số lượng máy đánh chữ trong kho bằng cách kiểm tra so sánh để quyết định xem chúng còn hàng hay không:

Chỉ thị về kết xuất có điều kiện

Tổng quan này mô tả cách sử dụng cùng nhau các lệnh Vue khác nhau được sử dụng để hiển thị có điều kiện.

Để xem một ví dụ có cả ba lệnh được hiển thị ở trên, chúng ta có thể mở rộng ví dụ trước bằng v-else-if để người dùng thấy 'Còn hàng', 'Còn rất ít!' hoặc 'Hết hàng':

Sử dụng Giá trị trả về từ một hàm

Thay vì sử dụng kiểm tra so sánh bằng lệnh v-if , chúng ta có thể sử dụng giá trị trả về 'true' hoặc 'false' từ một hàm:

Ví dụ trên có thể được mở rộng để cho thấy rằng v-if cũng có thể tạo các thẻ khác như thẻ <div> và <img>:

Dưới đây ví dụ được mở rộng hơn nữa.

<div id="ứng dụng">
  <p ="máy chữInStock">
    trong kho
  </p>
  <p >
    không có hàng
  </p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<kịch bản>
const ứng dụng = Vue.createApp({
  dữ liệu() {
    trở lại {
      máy đánh chữInStock: đúng
    }
  }
})
app.mount('#app')
</script>