了解如何根據某些條件使Vue輸出一門課或另一門課
說您想申請課程background-dark
到一個元素,如果isDark
prop是true,否則添加background-light
。
您將如何在Vue中做到這一點?
使用:class="[ isDark ? 'background-dark' : 'background-light' ]"
這是一個例子:
<template>
<div :class="[ isDark ? 'background-dark' : 'background-light' ]">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
props: {
isDark: Boolean
}
}
</script>
<!-- Add “scoped” attribute to limit CSS to this component only -->
<style scoped>
.background-dark {
background-color: #000;
}
.background-light {
background-color: #fff;
}
</style>
(非常感謝亞當·沃森(Adam Wathan)在Tailwind Slack上向我建議這一點)
免費下載我的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