使用 v-if 包裹元素，否则只有内容本身

Question

我在v-for 指令中生成了一组元素，如果对象具有url 属性，则将其包装在<a> 标记中 - 否则，我需要它来发出元素本身。

例如，

var data = {
    events: [
        {name: "Foo"},
        {name: "Bar", url: "google.com"}
    ]
};

和相应的HTML：

<div v-for="event in events">
    <span>{{event.name}}</span>
</div>

我需要的是仅当存在 url 属性时才将 <span> 包装在 <a v-bind:href="url"> 中。

我知道我可以使用 v-if 并使用两个跨度，例如：

<span v-if="!event.url">{{event.name}}</span>
<a v-bind:href="event.url" v-if="event.url">
    <span>{{event.name}}</span>
</a>

但是，在我的用例中，这里的 <span> 元素可能很大，我不想为了包装元素而重复自己。

有没有办法像上面那样实现条件换行？

Answer 1

例如，您可以使用v-html 并将您的逻辑呈现在函数中：

function wrapSpan(el, link) { // link wrapper function
  return `<a href="${link}">${el}</a>`;
}

new Vue({
  el: '#app',
  data: {
    events: [
      {name: "Foo"},
      {name: "Bar", url: "google.com"}
    ]
  },
  methods: {
    element: function(i) {
      const name = this.events[i].name;
      const url = this.events[i].url || null;
      const span = `<span style="color: green">${name}</span>`; // long span
      return (url) ? wrapSpan(span, url) : span;
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div v-for="(event, index) in events">
    <span v-html="element(index)"></span>
  </div>
</div>