使用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>在<a v-bind:href="url">僅當有一個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>