Tự động hiển thị một thành phần Vue

Sử dụng Vue, bạn xác định bố cục ứng dụng bằng cách sử dụng các thành phần. Ban đầu, bạn đặt thủ công các thành phần ở nơi bạn muốn, nhưng đến một lúc nào đó, bạn cần có cách linh hoạt hơn để hiển thị hoặc ẩn các thành phần dựa trên trạng thái ứng dụng

Sử dụng chỉ thị có điều kiện

Tùy chọn đơn giản nhất là sử dụngv-ifvàv-elsecác chỉ thị.

Đây là một ví dụ. Cácv-ifchỉ thị kiểm tranoTodosthuộc tính tính toán, trả về false nếu thuộc tính trạng tháitodoschứa ít nhất một mục:

<template>
  <main>
    <AddFirstTodo v-if="noTodos" />
    <div v-else>
      <AddTodo />
      <Todos :todos=todos />
    </div>
  </main>
</template>

<script>
export default {
data() {
return {
todos: [],
}
},
computed: {
noTodos() {
return this.todos.length === 0
}
}
}
</script>

Điều này cho phép giải quyết nhu cầu của nhiều ứng dụng mà không cần đến các thiết lập phức tạp hơn. Các điều kiện cũng có thể được lồng vào nhau, như thế này:

<template>
  <main>
    <Component1 v-if="shouldShowComponent1" />
    <div v-else>
      <Component2 v-if="shouldShowComponent2" />
      <div v-else>
        <Component3 />
      </div>
    </div>
  </main>
</template>

Sử dụngcomponentThành phần vàis

Thay vì tạov-ifvàv-elsecấu trúc, bạn có thể xây dựng mẫu của mình để có một trình giữ chỗ sẽ được gán động cho một thành phần.

Đó là những gìcomponentthành phần, với sự trợ giúp củav-bind:ischỉ thị.

<component v-bind:is="componentName"></component>

componentNamelà một thuộc tính của trạng thái xác định tên của thành phần mà chúng ta muốn kết xuất. Nó có thể là một phần của trạng thái hoặc một thuộc tính được tính toán:

<script>
export default {
  data() {
    return {
      componentName: 'aComponent',
    }
  }
}
</script>

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác:


Công nghệ Wiki trực tuyến!