カウンタ変数を利用するv-for

date
Mar 13, 2023
repo_url
slug
vfor-counter
status
Published
summary
type
Post
thumbnail_url
tags
vue
outer_link

基本構文

v-for="カウンタ変数 in 終端の値"
 

カウンタ変数ループで開始の値を変更したい場合

v-forの場合、開始の値は必ず1からスタートする。それを1ではない数にしたい場合は、カウンタ変数を利用する段階で足し算処理を行う。
 
(例)1900年から2030年までのドロップダウンを作る場合
<select>
  <option v-for="year in 130" v-bind:key="year" v-bind:value="year + 1899">
    {{year + 1899}}年
  </option>
</select>
 

© Hayato Kamiyama 2023 - 2024 - Build with Next.js & Notion