[Vue] (기타) 지시자 응용

1. v-for와 v-bind

v-bind:는 : 약식으로 사용함

<div id="app">
    <div>좋아하는 색상을 선택하세요.</div>
    <span v-for="(value, index) in values" :key="index">
        <input type="checkbox" v-model="checkedList" :id="value.id" :value="value.value">
        <label :for="value.id">{{value.value}}</label>
    </span>
    <br>
    <span>선택한 색상 : {{checkedList}}</span>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                checkedList: [],
                values:[
                    {id: 'red', value:'빨강'},
                    {id: 'blue', value:'파랑'},
                    {id: 'white', value:'하양'},
                    {id: 'black', value:'검정'},

                ]
            }
        },
    })
</script>

 

 

결과 화면