vue3 :first-child和:last-child的使用

在Vue 3中，:first-child和:last-child可以用于样式绑定，与CSS选择器中的:first-child和:last-child作用相同，它们用于选择父元素的第一个或最后一个子元素。

例如，如果你想为列表中的第一个和最后一个项应用不同的样式，可以这样做：

<template>
  <ul>
    <li
      v-for="(item, index) in items"
      :key="index"
      :class="{ 'first-item': index === 0, 'last-item': index === items.length - 1 }">
      {{ item }}
    </li>
  </ul>
</template>
 
<script>
export default {
  setup() {
    const items = ['Item 1', 'Item 2', 'Item 3'];
    return { items };
  },
};
</script>
 
<style>
.first-item {
  /* 第一个元素的样式 */
  color: red;
}
.last-item {
  /* 最后一个元素的样式 */
  color: blue;
}
</style>

在这个例子中，我们使用了一个计算属性来判断当前项是不是第一个或最后一个，并相应地应用了不同的类名。这样可以在不使用:first-child或:last-child伪类选择器的情况下，通过Vue的绑定来控制样式。