vue.js 정리 모음(v-for/숫자 3 자리 comma/input type=radio v-id 선언)

v-for

단순 for문

1. v-for
<br>
<div v-for="item in list" :key="item">
	{{ item }}
</div>
<br>

<script>
export default {
  data () {
    return {
      list: ['a', 'b', 'c']
    }
  }
  
}
</script>

index 사용 for문

<div v-for="(item, index) in list" :key="item">
	{{ item }}
</div>

'index' is defined but never used.eslint(vue/no-unused-vars)오류난다.

:key="index" → :key="index" 로 변경해서 사용하면 됩니다.

<div v-for="(item, index) in list" :key="index">
	{{ item }} : {{ index }}
</div>

숫자 3자리 콤마 filter

2. comma test
<br>
<div v-for="item in commaList" :key="item">
	{{ item | comma }}
</div>
    
<script>
export default {
  filters: {
    comma (val) {
      return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  },
  data () {
    return {
      commaList: [10, 1234, 123456789, 123456789012345]
    }
  }
}
</script>

v-for index를 이용한 radio id

3. radio index
<br>
<div v-for="(item, index) in list" :key="index">
  <input :id="'test' + index" type="radio" name="test">
  <label :for="'test' + index" class="text">{{ item }}</label>
</div>

* 추후 계속 적을 예정