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

我有个目标。模板将在此基础上进行迭代。我想告诉Vue：如果该对象中有一个“link”属性，那么使用标记包装以下元素，否则仍显示它

我用老虎机试过了。它不起作用，不可能打开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>

{{item.text}

结果应该是

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

没有链接的项目

为什么不按如下方式使用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>

{{item.text}

为什么不按如下方式使用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>

{{item.text}

这不会避免冗余。这不会避免冗余。冗余很少。您可以将

v-if=“！item.link”

替换为

v-else

。此外，您不应该尝试执行

之类的操作，这可能不会起作用，因为它与XML规范背道而驰。您必须正确地关闭元素，这与使用PHP等语言解决此类问题的方式相矛盾。几乎没有冗余。您可以将

v-if=“！item.link”

替换为

v-else

。此外，您不应该尝试执行

之类的操作，这可能不会起作用，因为它与XML规范背道而驰。您必须正确地关闭元素，这与如何使用PHP等语言解决此类问题相矛盾。