Question

我有一个物体。模板对此进行迭代。我想告诉Vue：如果该对象中有一个“链接”属性，则用标签将以下元素包装起来，否则无论如何都要显示它。

我尝试过使用插槽。这是行不通的，无法打开HTML元素并在各种范围内将其关闭。

在模板部分中评论了一种丑陋的方式。是否可以避免冗余？

所以，我的对象

data() {
    return {
        items: [
            {
                text: 'item with link',
                link: '#'
            },
            {
               text: 'item without link',
                // no link prop !!!
            },
        ]
    }
}

模板：

<template>
    <div>
        <div v-for="(item, i) in items" :key="i">
            <a v-if="item.link" :href="item.link">
                <!-- how to display this <p> with or without the parent -->
                <p>{{ item.text }}</p>
            </a>
            <!-- one possibility is to set a negation to <p> again, but its not nice -->
            <p v-if="!item.link">{{ item.text }}</p>
        </div>
    </div>
</template>

结果应该是

<div>
    <div>
        <a href="#">
            <p>item with link</p>
        </a>
    </div>
    <div>
        <p>item without link</p>
    </div>
</div>

Answer 1

为什么不按以下方式使用v-else？

<template>
    <div>
        <div v-for="(item, i) in items" :key="i">
            <a v-if="item.link" :href="item.link">
                <p>{{ item.text }}</p>
            </a>
            <p v-else>{{ item.text }}</p>
        </div>
    </div>
</template>

即使他们的父母的v-if指令不匹配，如何显示元素？

1 个答案: