使用 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>

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

我知道我可以使用 av-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>