在Vue.js中，如果满足某个条件，则有条件地显示标记，而不重复代码

首先，我对Vue很陌生，所以，如果答案很明显，我很抱歉。我有一个使用Vue.js呈现的元素列表，其中一些项目具有“已售出”属性，当它们具有该属性时，布局必须稍有更改，到目前为止，效果良好：

<template v-if="property.sold === 'sold'">
    <span class="property-item-sold">{{ property.sold }}</span>
    <div class="item-meta">
        <h3 class="property-item-title">{{ property.name }}</h3>
        <div class="item-meta-group">
            <div class="location"><i class="fas fa-map-marker-alt"></i> {{ property.location | cityState }} {{ property['property-state'][0].name }}</div>
            <div class="size">{{ property.surface.value | numberFormat }} {{ property.surface.unit }}</div>
        </div>
    </div>
</template>

<template v-else>
    <div class="property-item-offering-type">For {{ property['offering-type'][0].name }} </div>
    <div class="item-meta">
        <h3 class="property-item-title">{{ property.name }}</h3>
        <div class="item-meta-group">
            <div class="location"><i class="fas fa-map-marker-alt"></i> {{ property.location | cityState }} {{ property['property-state'][0].name }}</div>
            <div class="size">{{ property.surface.value | numberFormat }} {{ property.surface.unit }}</div>
        </div>
        <a :href="property.url" class="btn btn--green">View Details</a>
    </div>
</template>

{{property.selled}}
{{property.name}
{{property.location}{cityState}{{property['property-state'][0].name}
{{property.surface.value}{{numberFormat}{{property.surface.unit}
对于{{property['providing-type'][0].name}
{{property.name}
{{property.location}{cityState}{{property['property-state'][0].name}
{{property.surface.value}{{numberFormat}{{property.surface.unit}

但是我重复了很多代码，有没有办法让这个条件变干？

类似这样的东西：

<template>
    <span v-if="property.sold === 'sold'" class="property-item-sold">{{ property.sold }}</span>
    <div v-else class="property-item-offering-type">For {{ property['offering-type'][0].name }} </div>
    <div class="item-meta">
        <h3 class="property-item-title">{{ property.name }}</h3>
        <div class="item-meta-group">
            <div class="location"><i class="fas fa-map-marker-alt"></i> {{ property.location | cityState }} {{ property['property-state'][0].name }}</div>
            <div class="size">{{ property.surface.value | numberFormat }} {{ property.surface.unit }}</div>
        </div>
        <a v-if="property.sold !== 'sold'" :href="property.url" class="btn btn--green">View Details</a>
    </div>
</template>

{{property.selled}}
对于{{property['providing-type'][0].name}
{{property.name}
{{property.location}{cityState}{{property['property-state'][0].name}
{{property.surface.value}{{numberFormat}{{property.surface.unit}

太好了，谢谢！在允许的情况下接受答案。