Prop变量中的Vue条件类

Question

所以，目前，我在home.vue页面上有一组单选按钮，并绑定到像So-这样的子组件

<div class="radio-toolbar prev-selector">
<input type="radio" id="one" value="Default" v-model="preview" />
<label for="one">Default</label>
<input type="radio" id="two" value="Padded" v-model="preview" />
<label for="two">Padded</label>
<input type="radio" id="three" value="Full" v-model="preview" />
<label for="three">Full</label>
<span>Picked: {{ preview }}</span>
</div>
<div class="media-wrapper">
<CardStyle 
v-bind:card="this.preview"
/>
</div>

然后传递"；预览"；数据到CardStyle道具。道具以"卡片"的形式接收它，我可以在我的组件中使用数据。

然而，我想知道如何使用"；this.preview"；(可以是"default"、"padded"或"full"(作为一个动态类到我的子组件，而不必将它们转换为真/假结果并使用-

:class="{ default: isDefault, padded: isPadded, full: isFull }"

(我有一些名为.default、.paddled和.full的类，只要以某种方式传递数据就可以使用了。(

Answer 1

只要this.preview具有要使用的类名值，就只使用:class="this.preview"。

Answer 2

我构建了几个示例组件，演示如何解决您的问题。

家长.vue

<template>
<div class="parent">
<h5>Select Card Style</h5>
<div class="row">
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="radio" id="one" value="default" v-model="preview" />
<label class="form-check-label" for="one">Default</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="two" value="padded" v-model="preview" />
<label class="form-check-label" for="two">Padded</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="three" value="full" v-model="preview" />
<label class="form-check-label" for="three">Full</label>
</div>
</div>
</div>
<card-style :preview="preview" />
</div>
</template>
<script>
import CardStyle from './CardStyle.vue'
export default {
components: {
CardStyle
},
data() {
return {
preview: 'default'
}
}
}
</script>

CardStyle.vue

<template>
<div class="card-style">
<hr>
<div class="row">
<div class="col-md-6">
<span :class="preview">{{ preview }} Card Style</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
preview: {
type: String,
required: true
}
},
}
</script>
<style scoped>
.default {
background-color: burlywood;
}
.padded {
background-color:lightskyblue
}
.full {
background-color:lightcoral
}
</style>

Answer 3

您可以为组件中的字段类构建一个计算变量。这将允许您根据您的条件或情况选择或定义要使用的类。

computed: {
myclasses() {
return [
'class1',
'class2',
[this.condition ? 'class3' : 'class4'],
{ class5: this.othercondition },
];
},
},

然后，只需使用它作为模板：

<div :class="myclasses"></div>