在Vue中,您可以使用绑定语法和内联样式来动态添加类和内容。以下是一个示例:
<template>
<div :class="['hotel-type-text', { 'after-text': showAfterText }]">
{{ hotelTypeText }}
<span v-if="showAfterText" class="after-text">After text</span>
</div>
</template>
<script>
export default {
data() {
return {
hotelTypeText: "Hotel Type",
showAfterText: true
};
}
};
</script>
<style>
.hotel-type-text {
/* 样式定义 */
}
.after-text {
/* 样式定义 */
}
</style>
在上面的代码中,hotel-type-text
类是主要的文本样式类,after-text
类是用于添加 after 文字的类。通过根据 showAfterText
数据属性的值来决定是否显示 after-text
元素,从而实现动态控制是否显示 after 文字。
请根据您实际的需求和样式定义进行适当调整。
内容由零声教学AI助手提供,问题来源于学员提问