我有一個自定義組件，我在其中傳遞一些資料來呈現一些 CSS 樣式
像
<title :profile="true" :/>
在我的組件中
我有一個 div 作為：
<div >
我想如果我的自定義類 :class 是真的，我應該添加一個名為 flexdisplay 的新類，就像
<div >
我在這里缺少什么，我嘗試將值傳遞給 data 作為 false 但它只是拋出隨機錯誤
uj5u.com熱心網友回復：
讓我們假設您的父組件就像
<title :profile="true" :showClass="true"/> <!-- modified props name from class to showClass
在您的子組件中，正如您所說，您有一個如下所示的 div
<div >
您可以做的是將上面的 div 更改為以下格式
<div :> <!-- where enableClass will be a computed property
在子組件的 script 標簽內，定義 props 和計算屬性，如下所示
<script>
export default {
props: {
showClass: {
type: Boolean,
default: false
},
}
computed: { // The reason I am doing with computed is for better reactivity
enableClass() {
return this.showClass;
}
}
}
</script>
uj5u.com熱心網友回復：
您可以使用類條件語法
<div :class="{ "active": isActive }"></div>
如果條件是，這將放置active類 isActivetrue
請注意，您可以結合class和:class屬性來放置類條件類和經典類
<div class="myClass" :class="{ "active": isActive }"></div>
例如，在您的情況下，如果您有布爾class道具，您的組件將如下所示：
<template>
<div class="tabletitle" :class={"flexdisplay": isClass}>
...
</div>
</template>
<script>
export default {
props: {
isClass: {
type: Boolean,
default: true
}
}
}
</script>
**注意：**我已經更改了class道具，isClass以便更好地理解并且不要與類鍵操作混淆
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/473059.html