使用 counter() 產生 Index | 點燈坊

傳統總認為 CSS 只能處理視覺部分，Index 該由 JavaScript 處理，但透過 CSS 的 counter() 也可產生 Index。

Version

Vue 3.0.0
CSS 3

Vue

使用 <ul> + <li> 顯示 title，並且在之前加上 index。

<template>
  <ul>
    <li v-for="({ title }, i) in data" :key="i">
      {{ i+1 }} : {{ title }}
    </li>
  </ul>
</template>

<script setup>
export let data = [
  { title: 'FP in JavaScript' },
  { title: 'Programming Haskell' },
  { title: 'Speaking JavaScript' }
]
</script>

第 10 行

export let data = [
  { title: 'FP in JavaScript' },
  { title: 'Programming Haskell' },
  { title: 'Speaking JavaScript' }
]

Vue 會將所有 title 以 Object Array 放在 data 內。

第 2 行

<ul>
  <li v-for="({ title }, i) in data" :key="i">
    {{ i+1 }} : {{ title }}
  </li>
</ul>

• <li> 則使用 v-for 加以展開
• Index 則藉由 v-for 產生

CSS Counter

<template>
  <ul>
    <li v-for="({ title }, i) in data" :key="i">
      {{ title }}
    </li>
  </ul>
</template>

<script setup>
export let data = [
  { title: 'FP in JavaScript' },
  { title: 'Programming Haskell' },
  { title: 'Speaking JavaScript' }
]
</script>

<style scoped>
body {
  counter-reset: i;
}

li {
  counter-increment: i;
}

li::before {
  content: counter(i) " : ";
}
</style>

第 2 行

<ul>
  <li v-for="({ title }, i) in data" :key="i">
    {{ title }}
  </li>
</ul>

亦使用 v-for 顯示 <ul> 與 <li>，但 index 並沒有由 Vue 處理。

18 行

body {
  counter-reset: i;
}

在 body selector 以 counter-reset 定義 i counter，此時 i 初始值為 0。

22 行

li {
  counter-increment: i;
}

每遇到 li tag 就以 counter-increment 對 i counter 遞增。

li 可使用其他 selector 取代，只要符合 selector 條件，i counter 就會遞增

26 行

li::before {
  content: counter(i) " : ";
}

• 使用 li::before 在 <li> 顯示 index
• 以 content 顯示 i counter 要顯示內容，將 i 傳入 counter() 將顯示目前 i counter 值，最後加上 :

Conclusion

• CSS 也有 counter 後，可藉由 CSS selector 條件遞增 counter，不再一定得用 JavaScript

Reference

MDN, Using CSS counters
w3schools.com, CSS Counters
CSS-Tricks, counter-increment