[vue] v-for로 선택 상자에 지정된 횟수와 10개의 중복 처리 표시

v-for에서 1부터 10까지의 표시 방법

이런 식으로 1부터 10까지 나와요.

<template>
  <div id="app">
    <ul v-for="n in 10" :key="n">
      <li>{{ n }}</li>
    </ul>
  </div>
</template>

결과

v-for에서 10개씩 처리하는 방법

일반적인 for문장이라면 이렇게 증가한다

    for (int i = 0; i < 10; i+10){
      sum += 2;
    }

그러나 vue의 경우i+10의 방법은 순조롭지 못하다
나는 어떻게 10을 늘려야 할지 모르겠다.
해결 방법은 정말 간단합니다. 이 방법으로 10개를 표시할 수 있습니다.

<template>
  <div id="app">
    <ul v-for="n in 10" :key="n">
      <li>{{ n * 10 }}</li>
    </ul>
  </div>
</template>

결과

선택 상자에 10가지 방법 표시

그렇다면 스스로 대처 방법을 찾는 데 많은 시간이 걸렸는데, 이것은 선택 상자에 각각 10개씩 표시하는 방법이다.{{ n * 10 }} 방법은 간단합니다.
나는 어디에 쓰느냐i+10의 요소에 집착한다.
선택 상자에 10개씩 표시하는 방법도 정말 간단합니다. 이렇게 하세요.

<template slot-scope="hoge">
   <el-select 
      v-model="hoge" 
      placeholder="Select">
      <el-option 
        v-for="n in 10"
        :key="n"
        :value="n * 10">
      </el-option>
   </el-select>
</template>

결과
:value곳은 똑같이 치면 됩니다.v-for 또는key의 부분에 i+10의 요소를 넣는 것은 전혀 순조롭지 않다.
일반적인 for문장의 방법에 끌려서 계속 + 로 처리해도 좋지 않다.

0부터 시작하는 방법

참고로 0부터 시작하는 방법은 이렇게 하는 것이다

<template>
  <div id="app">
    <ul 
      v-for="n in 10" :key="n">
      <li>{{ (n - 1)  * 10 }}</li>
    </ul>
  </div>
</template>

결과

참고문

v-for에서 출력 그룹을 순환하는 지정된 횟수