时间戳

首页 > 解决方案 > 如何在 v-bind 和 v-for 中获取要使用的对象

javascript - 如何在 v-bind 和 v-for 中获取要使用的对象

问题描述

考虑：

<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。我如何links访问v-bind？

标签： javascriptvue.jsvuejs2

解决方案

因为linksis an object,links.length总是undefined因为 anobject没有length属性（但 anArray 有）。

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

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

您的类绑定的语法不太正确。您可以像这样组合对象语法和数组语法：

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

演示 1

或者只使用对象语法：

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

演示 2

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

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

演示 3

推荐阅读