使用基本列表呈现为每个 "v-for" 创建 href

Question

向列表中的每个 link 添加自定义 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.

使用基本列表呈现为每个 "v-for" 创建 href

Create href for each "v-for" using basic list rendering

html

javascript

rendering

vue.js