Kết xuất có điều kiện của Vue.js

Kết xuất có điều kiện trong Vue.js cho phép bạn hiển thị hoặc ẩn các thành phần một cách động dựa trên các điều kiện nhất định. Tính năng này rất cần thiết để tạo giao diện người dùng tương tác và phản hồi. Vue.js cung cấp một số chỉ thị để xử lý kết xuất có điều kiện, cho phép bạn quản lý hiệu quả khả năng hiển thị của các thành phần trong ứng dụng của mình.

Chỉ thị v-if

Chỉ thị v-if được sử dụng để render các phần tử có điều kiện dựa trên tính đúng đắn của một biểu thức. Nếu biểu thức được đánh giá là true, phần tử sẽ được render; nếu không, nó sẽ không được bao gồm trong DOM. Sau đây là một ví dụ cơ bản:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Trong ví dụ này, phần tử đoạn văn chỉ được hiển thị nếu isVisible là true. Nhấp vào nút sẽ chuyển đổi giá trị của isVisible và do đó kiểm soát khả năng hiển thị của đoạn văn.

Chỉ thị v-else

Chỉ thị v-else có thể được sử dụng kết hợp với v-if để chỉ định một khối nội dung thay thế để hiển thị khi điều kiện v-if là false. Sau đây là một ví dụ:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <p v-else>This text is visible if 'isVisible' is false.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Trong ví dụ này, khi isVisible là true, đoạn văn đầu tiên sẽ được hiển thị. Khi isVisible là false, đoạn văn thứ hai sẽ được hiển thị thay thế.

Chỉ thị v-show

Chỉ thị v-show cũng cho phép bạn render các phần tử có điều kiện, nhưng nó khác với v-if ở chỗ nó chuyển đổi chế độ hiển thị của phần tử bằng thuộc tính CSS display thay vì thêm hoặc xóa nó khỏi DOM. Điều này có thể hiệu quả hơn nếu bạn cần thường xuyên chuyển đổi chế độ hiển thị của một phần tử.

<template>
  <div>
    <p v-show="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Trong ví dụ này, lệnh v-show kiểm soát khả năng hiển thị của đoạn văn bằng cách thiết lập thuộc tính display. Phần tử vẫn nằm trong DOM nhưng bị ẩn hoặc hiển thị dựa trên giá trị isVisible.

Chỉ thị v-else-if

Chỉ thị v-else-if được sử dụng để tạo chuỗi "else if" trong logic kết xuất có điều kiện của bạn. Nó cho phép bạn chỉ định các điều kiện bổ sung để đánh giá xem điều kiện v-if trước đó có được đáp ứng hay không. Sau đây là một ví dụ:

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred!</p>
    <p v-else>Content loaded successfully.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

Trong ví dụ này, nội dung hiển thị phụ thuộc vào giá trị của thuộc tính status. Các chỉ thị v-if, v-else-if và v-else được sử dụng để xử lý các trạng thái khác nhau.

Phần kết luận

Kết xuất có điều kiện là một khía cạnh quan trọng trong việc phát triển các ứng dụng tương tác và động với Vue.js. Bằng cách sử dụng các chỉ thị như v-if, v-else, v-show và v-else-if, bạn có thể kiểm soát việc hiển thị các phần tử dựa trên nhiều điều kiện khác nhau. Việc thành thạo các chỉ thị này sẽ giúp bạn tạo ra các giao diện phản hồi nhanh hơn và thân thiện với người dùng hơn trong các ứng dụng Vue.js của mình.