如何让对象在 v-bind 和 v-for 中使用

Question

考虑：

<ol class="breadcrumb arr-right">
    <li v-for="(url,name, index) in links" v-bind:class=" (index == (links.length -1)) ? 'breadcrumb-item active' : 'breadcrumb-item'">
        <a v-bind:href="url">{{ name }}</a>
    </li>
</ol>

这里的问题是 links.length 总是 undefined。由于链接的 undefined 状态，除了三元运算外，这里的所有内容都工作正常。如何从 v-bind 访问 links？

Answer 1

试试这个：

<ol class="breadcrumb arr-right">
    <li v-for="(item, index) in links" v-bind:class=" (index == (links.length -1)) ? 'breadcrumb-item active' : 'breadcrumb-item'">
        <a v-bind:href="item.url">{{ item.name }}</a>
    </li>
</ol>

Answer 2

由于 links 是 object，links.length 将始终是 undefined，因为 object 没有 length 属性（但是 Array does）。

您可以根据密钥长度确定 object 的大小。请注意，Object.keys() 给出了 object 键的 Array，因此您可以在结果上使用 Array.prototype.length 来获取对象大小。

const class = index === Object.keys(links).length - 1
            ? 'breadcrumb-item active'
            : 'breadcrumb-item'

您 class binding 的语法不太正确。您可以像这样组合 object syntax and array syntax：

<li v-bind:class="[ { 'active': index === Object.keys(links).length - 1 }, 'breadcrumb-item' ]">

demo 1

或者只使用对象语法：

<li class="breadcrumb-item" v-bind:class="{ 'active': index === Object.keys(links).length - 1 }">

demo 2

但是如果您的 objective 是为最后一个 <li> 元素设置样式，那么 CSS 中可能有更简单的方法。不要将 .breadcrumb-item.active 应用于最后一项，而是使用 :last-of-type:

.breadcrumb-item:last-of-type {
  /* your styles here */
}

demo 3

如何让对象在 v-bind 和 v-for 中使用

How to get object to use in v-bind, in v-for

javascript

vue.js

vuejs2