使用基本列表渲染爲每個「v-for」創建href

Question

將自定義href添加到列表中的每個鏈接的正確方法是什麼？

例如，我想link: 'News'將有href="http://example.com/news"。

有沒有一種可能的方式做這樣的事情：

{ link: 'News', href: 'http://example.com/news' } 

，並使其像：

<a v-bind:href="{{ a.href }}" v-bind:class="[foot]" v-for="a in news">{{ a.link }}</a> 

我有：

JS

var footer = new Vue({ 
el: '.footer', 
data: { 
    foot: 'footmenu', 
    news: [ 
     { link: 'News', }, 
     { link: 'Latest' }, 
     { link: 'Business news' }, 
     // etc 
    ], 
    business: [ 
     { link: 'Vets' }, 
     { link: 'Companion animal' }, 
     { link: 'Equine' }, 
     // etc 
    ], 
    // etc 
}); 

HTML

<a v-bind:class="[foot]" v-for="a in news">{{ a.link }}</a> 

Answer 1

它應該像下面：

<a v-bind:href="a.href" v-bind:class="[foot]" v-for="a in news">{{ a.link }}</a> 

，你不需要用v-bind一起括號。來自documentation:

將一個或多個屬性或組件prop動態綁定到表達式。