javascript - 使用基本列表渲染为每个 "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:

Dynamically bind one or more attributes, or a component prop to an expression.