Chỉ thị v-show

Khả năng hiển thị có điều kiện

Lệnh v-show ẩn một phần tử khi điều kiện là 'false' bằng cách đặt giá trị thuộc tính CSS 'display' thành 'none'.

Sau khi viết v-show dưới dạng thuộc tính HTML, chúng ta phải đưa ra điều kiện để quyết định có hiển thị thẻ hay không.

Trong đoạn mã trên, 'showDiv' biểu thị thuộc tính dữ liệu boolean Vue với giá trị thuộc tính là 'true' hoặc 'false'. Nếu 'showDiv' là 'true' thì thẻ div được hiển thị và nếu 'false' thì thẻ không được hiển thị.

v-show so với v-if

Sự khác biệt giữa v-show và v-if là v-if tạo (render) phần tử tùy theo điều kiện, nhưng với v-show phần tử đã được tạo sẵn thì v-show chỉ thay đổi khả năng hiển thị của nó.

Do đó, tốt hơn nên sử dụng v-show khi chuyển đổi chế độ hiển thị của một đối tượng, vì trình duyệt sẽ dễ dàng thực hiện hơn và có thể dẫn đến phản hồi nhanh hơn và trải nghiệm người dùng tốt hơn.

Lý do sử dụng v-if thay vì v-show là vì v-if có thể được sử dụng với v-else-if và v-else .

Trong ví dụ bên dưới, v-show và v-if được sử dụng riêng biệt trên hai phần tử <div> khác nhau, nhưng dựa trên cùng một thuộc tính Vue. Bạn có thể mở ví dụ và kiểm tra mã để thấy rằng v-show giữ phần tử <div> và chỉ đặt thuộc tính hiển thị CSS thành 'none', nhưng v-if thực sự phá hủy phần tử <div>.

<div id="ứng dụng">
  <div id="lightDiv">
    <div ="lightOn"></div>
    <img src="img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">Chuyển đèn</button>
</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 {
        lightOn: sai
      }
    }
  })
  app.mount('#app')
</script>