如何在 aurelia 中设置使用 repeat.for 生成的 li 之一的样式？

Question

<ul>
  <li repeat.for="row of router.navigation" > ${row.title} 
  </li>
</ul>

infact i want to style one of the router button that generate with repeat.for method

want to make left border radius for navigation bar like the right of the navigation bar

Answer 1

您可以使用 $index 上下文变量识别第一个重复的元素。这会导致这样的结果：

<ul>
  <li repeat.for="row of router.navigation" >
   <a if.bind="$index === 0" class="blah"> ${row.title} </a>
   <a else class="another class"> ${row.title} </a>
  </li>
</ul>

如果您需要在 <li> 标签上做样式，解决方案可能是这样的：

<ul>
  <template repeat.for="row of router.navigation" >
    <li if.bind="$index === 0" class="blah"> ${row.title} </li>
    <li else class="another class"> ${row.title} </li>
  </template>
</ul>

Answer 2

作为单行选项，您可以将 class 属性与 ...

绑定

 <li repeat.for="row of router.navigation" class="${myBool ? 'a-class' : 'another-class'}">${row.title}</li>

您可以使用字符串插值或 .bind 语法绑定 class。参见 https://aurelia.io/docs/binding/class-and-style#class

更新：抱歉...应该进一步阅读您的其他评论。如果只是为了第一个，为什么不直接使用 CSS?

#myUl>li:first-child{
   // my CSS here
}

如何在 aurelia 中设置使用 repeat.for 生成的 li 之一的样式？

How to style one of the li that generate with repeat.for in aurelia?

sass

aurelia