[Vue3] Stand Alone #3. v-for, :key

Vuejs 3 CDN 으로 사용하기

 

Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..),
홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다.
Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~

 

data 의 cars 배열을 for 문으로 li 들을 뿌려주는 예제입니다.

v-for="item in cars" 로 반복을 합니다.

:key 는 unique 한 값으로 입력을 해줘야 합니다.

<meta charset="utf-8">

<!-- vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<div id="app">
    <ul>
        <li v-for="item in cars" :key="item">
            {{ item }}
        </li>
    </ul>
</div>

<script>
    var app = Vue.createApp({
        data() {
            return {
                cars: ['hyundai', 'kia', 'bmw', 'volvo', 'benz']
            }
        }
    }).mount('#app')
</script>

배열의 문자열이 중복될 수 도 있으니 index 를 사용할 경우 아래와 같이 변경하면 됩니다.

        <li v-for="(item, i) in cars" :key="i">
            {{ item }}
        </li>

 

문자열이 json list 일 경우

<meta charset="utf-8">

<!-- vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<div id="app">
    <ul>
        <li v-for="(item, i) in students" :key="i">
            {{ item.name }} ({{ item.age }})
        </li>
    </ul>
</div>

<script>
    var app = Vue.createApp({
        data() {
            return {
                students: [
                    {
                        name : 'Kim',
                        age: 18,
                    },
                    {
                        name: 'Oh',
                        age: 19
                    },
                    {
                        name: 'Park',
                        age: 19
                    }
                ]
            }
        }
    }).mount('#app')
</script>

결과