在Vue中，您可以使用计算属性和绑定语法来动态生成类和内容。以下是一个示例：
<template>
<div :class="hotelTypeClass">
{{ hotelTypeText }}
<span v-if="showAfterText" class="after-text">{{ afterText }}</span>
</div>
</template>
<script>
export default {
data() {
return {
hotelTypeText: "Hotel Type",
showAfterText: true
};
},
computed: {
hotelTypeClass() {
// 根据条件判断是否添加 after-text 类
return ['hotel-type-text', { 'after-text': this.showAfterText }];
},
afterText() {
// 根据条件返回 after 文字内容
return this.showAfterText ? 'After text' : '';
}
}
};
</script>
<style>
.hotel-type-text {
/* 主要的文本样式 */
}
.after-text {
/* after 文字的样式 */
}
</style>
在上面的代码中，hotelTypeClass 计算属性根据 showAfterText 数据属性的值来决定是否添加 after-text 类。同时，定义了 afterText 计算属性来根据条件返回 after 文字内容。
请根据您实际的需求和样式定义进行适当调整。
内容由零声教学AI助手提供，问题来源于学员提问
