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-if
vàv-else
các chỉ thị.
Đây là một ví dụ. Cácv-if
chỉ thị kiểm tranoTodos
thuộc tính tính toán, trả về false nếu thuộc tính trạng tháitodos
chứ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ụngcomponent
Thành phần vàis
Thay vì tạov-if
vàv-else
cấ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ìcomponent
thành phần, với sự trợ giúp củav-bind:is
chỉ thị.
<component v-bind:is="componentName"></component>
componentName
là 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:
- Tổng quan về Vue.js
- Vue.js CLI: tìm hiểu cách sử dụng nó
- Công cụ dành cho nhà phát triển Vue.js
- Cấu hình mã VS để phát triển Vue
- Tạo ứng dụng đầu tiên của bạn với Vue.js
- Các thành phần tệp đơn của Vue.js
- Các mẫu và nội suy Vue.js
- Chỉ thị Vue.js
- Phương thức Vue.js
- Thuộc tính được tính toán của Vue.js
- Tạo kiểu các thành phần Vue.js bằng CSS
- Người theo dõi Vue.js
- Phương thức Vue so với người theo dõi so với thuộc tính được tính
- Bộ lọc Vue.js
- Các thành phần của Vue.js
- Vue.js Slots
- Đạo cụ thành phần Vue.js
- Sự kiện của Vue.js
- Giao tiếp các thành phần Vue.js
- Vuex, Giám đốc Nhà nước Vue.js
- Vue, sử dụng một thành phần bên trong một thành phần khác
- Vue, cách sử dụng một prop làm tên lớp
- Cách sử dụng SCSS với Vue.js Single File Components
- Sử dụng Tailwind với Vue.js
- Bộ định tuyến Vue
- Tự động hiển thị một thành phần Vue
- Trang Cheat Vue.js
- Lưu trữ dữ liệu Vue vào localStorage bằng Vuex
- Cách áp dụng động một lớp bằng Vue
- Vue, cách sử dụng v-model
- Vue, tại sao dữ liệu phải là một hàm
- Roadmap to become a Vue.js developer in 2020