使用Vue,您可以使用組件定義應用程序佈局。在開始時,您手動將組件放置在所需的位置,但是在某些時候,您需要一種更靈活的方式來根據應用程序狀態顯示或隱藏組件。
使用條件指令
最簡單的選擇是使用v-if
和v-else
指令。
這是一個例子。這v-if
指令檢查noTodos
計算屬性,如果state屬性,則返回falsetodos
包含至少一項:
<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>
這樣就可以解決許多應用程序的需求,而無需進行更複雜的設置。條件語句也可以嵌套,如下所示:
<template>
<main>
<Component1 v-if="shouldShowComponent1" />
<div v-else>
<Component2 v-if="shouldShowComponent2" />
<div v-else>
<Component3 />
</div>
</div>
</main>
</template>
使用component
組件和is
而不是創建v-if
和v-else
結構,您可以構建您的模板,以便有一個佔位符將被動態分配一個組件。
那就是component
組件確實在v-bind:is
指示。
<component v-bind:is="componentName"></component>
componentName
是狀態的屬性,用於標識我們要呈現的組件的名稱。它可以是狀態的一部分,也可以是計算的屬性:
<script>
export default {
data() {
return {
componentName: 'aComponent',
}
}
}
</script>
免費下載我的Vue手冊
更多vue教程:
- Vue.js概述
- Vue.js CLI:學習如何使用它
- Vue.js開發工具
- 為Vue開發配置VS代碼
- 使用Vue.js創建您的第一個應用
- Vue.js單個文件組件
- Vue.js模板和插值
- Vue.js指令
- Vue.js方法
- Vue.js計算屬性
- 使用CSS樣式化Vue.js組件
- Vue.js觀察者
- Vue方法vs觀察者vs計算的屬性
- Vue.js過濾器
- Vue.js組件
- Vue.js插槽
- Vue.js組件道具
- Vue.js活動
- Vue.js組件通信
- Vuex,Vue.js狀態管理器
- Vue,在另一個組件內部使用一個組件
- Vue,如何使用prop作為類名
- 如何將SCSS與Vue.js單個文件組件一起使用
- 在Vue.js中使用Tailwind
- Vue路由器
- 動態顯示Vue組件
- Vue.js備忘單
- 使用Vuex將Vue數據存儲到localStorage
- 如何使用Vue動態應用類
- Vue,如何使用v模型
- Vue,為什麼數據必須是函數
- Roadmap to become a Vue.js developer in 2020