VueJS day10

폼 입력 바인딩

v-model 디렉티브를 사용하여 폼 input, textarea 요소에 양방향 데이터 바인딩을 생성할 수 있다.

text )

<div id="app">
    <input v-model="message" placeholder="여기를 수정해보세요">
    <p>메시지: </p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message:''
        },
        methods: {
        }
    })
</script>

textarea )

<div id="app">
    span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre-line"></p>
<br>
<textarea v-model="message" placeholder="여러줄을 입력해보세요"></textarea>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message:''
        },
        methods: {
        }
    })
</script>

checkBox )

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox"></label>

<div id='example'>
    <input type="checkbox" id="chicken" value="치킨" v-model="checked">
    <label for="chicken">치킨</label>
    <input type="checkbox" id="hamburger" value="햄버거" v-model="checkedName">
    <label for="hamburger">햄버거</label>
    <input type="checkbox" id="Ramen" value="라면" v-model="checked">
    <label for="Ramen">라면</label>
    <br>
    <span>체크한 메뉴: </span>
</div>
<script>
    new Vue({
        el: '#example',
        data: {
            checked: []
        }
    })
</script>

Radio button )

<div id="app">
    <input type="radio" id="chicken" value="chicken" v-model="picked">
    <label for="chicken">chicken</label>
    <br>
    <input type="radio" id="pizza" value="pizza" v-model="picked">
    <label for="pizza">pizza</label>
    <br>
    <span>선택: </span>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            picked:''
        },
        methods: {
        }
    })
</script>

Select )

<div id="app">
    <select v-model="selected">
        <option disabled value="">choice</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>선택함: </span>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            selected:''
        },
        methods: {
        }
    })
</script>

Array Select )

<div id="app">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            
        </option>
    </select>
    <span>Selected: </span>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            selected: '',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        }
    })
</script>

참고 : https://kr.vuejs.org/v2/guide/forms.html