为每个＆＃34; v-for＆＃34;创建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动态绑定到表达式。