v-如果是周围元素

Question

我们说我有以下案例

<div class="entry">
  <img src="image1.png">
</div>
<div class="entry">
  <a href="#mylink">
    <img src="image2.png">
  </a>
</div>

现在，需要根据条件迭代项目：

<div class="entry" v-for="o in items">
  <a :href="o.url" v-if="o.url != ''">
    <img :src="o.image">
  </a>
  <img :src="o.image" v-else>
</div>

使用items = [{url: '', image: 'image1.png'}, {url: '#mylink', image: 'image2.png'}]，这将正确呈现为上面的相同代码段：

<div class="entry">
  <img src="image1.png">
</div>
<div class="entry">
  <a href="#mylink">
    <img src="image2.png">
  </a>
</div>

但是正如您所看到的，我正在复制粘贴<img>指令的v-if标记。在这种情况下，我认为它很简单，但我想知道是否有更干的方法。

我正在寻找类似的东西：

<div class="entry" v-for="o in items">
  <a :href="o.url" v-if-always-render-children="o.url != ''">
    <img :src="o.image">
  </a>
</div>

哪个应呈现给相同的代码段。当然，指令v-if-always-render-children并不存在。

如何避免多次声明<img>标记（以及可能的子标记）？

Answer 1

v-else很好，如果您真的关心它并且担心内容的大小，那么请将该内容作为一个组件。

或者你可以使用渲染函数或jsx，但除非这个事情变得复杂得多，v-else就好了