next .js:我可以使用基于布尔值的三元操作符添加一个类吗?

Question

我试图在道具中使用布尔值来添加基于三元运算符的类。我显然没有做对，因为它的值总是为false。

<div :class="$style.inner + ' ' + (isRight == true ? 'is-right' : 'is-false')" :style="`color: #` + fontColor"></div>

如果它是真的，我需要将is-right添加到类中，否则，不需要添加。

props: {
isRight: {
type: Boolean,
default: false
},
}

index.vue

<Signpost isRight=true/>

.is-right { padding-left:20% } 

看看他们的文档，我不确定我能不能用布尔值来做这个。

Answer 1

要传递一个布尔值给一个道具，你需要使用v-bind或:像这样:

<signpost v-bind:isRight="true" />

或

<signpost :isRight="true" />

另外，如果isRight的唯一可能值是true或false，您可以将您的三元制缩短为:

:class="isRight ? 'is-right' : 'is-false'

Answer 2

我的需要绑定的道具有一点语法错误:

<Signpost :is-right="true"/>

然后在div上输入@kissu说:

<div :class="[isRight ? 'is-right' : '']"></div>

Answer 3

尝试将prop传递为:is-right="false"以使其传递为布尔值而不是作为基本的String(is-right="false").

对于类，可以像docs

中所示那样编写

<div :class="[isRight ? 'is-right' : 'is-false']"></div>

这样，你甚至可以做一个强相等性检查:isRight === true(比较布尔值与布尔值)。

VueJS devtools可以帮助你看到类型(多亏了颜色)。

---

这里有一些强烈推荐的道具名称大小写建议:https://v2.vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended

props: {
greetingText: String // camel-cased here
}

<WelcomeMessage greeting-text="hi"/> <!-- kebab-cased here -->

---

另外，请随意编写ES6模板文字，这可能有助于讲座。一个可行的解决方案是:

<div :style="`color: #${fontColor}`"></div>

也可以为你的class做，但我不想在这里冒险一个糟糕的插值。