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

Question

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

事实上，我想为使用repeat.for方法生成的路由器按钮设置样式

想让导航栏的左边框半径像导航栏的右边一样

标签： sassaurelia

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>