Vue_바인딩(v-bind / v-model / lazy / number / trim / select / checkbox)

v-bind: 단방향 바인딩
[v-bind]: 속성명 = 객체 데이터

<template>

  <div>

    <!--

        v-bind: 객체의 속성 단방향 바인딩

        [v-bind]: 속성명 = 객체 데이터

    -->

    mesg: <input type="text" value="mesg"><br>

    v-bind:value="mesg": <input type="text" v-bind:value="mesg"><br>

    :value="mesg": <input type="text" :value="mesg">

  </div>

</template>

<script>

export default {

    data: function(){

        return {

            mesg: "메세지"

        }

    }

}

</script>

<style>

h1{

    color: red

}

</style>

 

 

쌍방향 바인딩
v-model: '객체의 속성명'

 

<template>

  <div>

    <!--

        v-model: '객체의 속성명' 쌍방향 바인딩

    -->

    속성: {{ mesg }}<br>

    v-model="mesg": <input type="text" v-model="mesg"><br>

    v-model="mesg": <input type="text" v-model="mesg"><br>

    v-bind:value="mesg": <input type="text" v-bind:value="mesg"><br>

    :value="mesg": <input type="text" :value="getMesg()">

  </div>

</template>

<script>

export default {

    data: function(){

        return {

            mesg: "메세지"

        }

    },

    methods:{

        getMesg: function(){

            return this.mesg;

           

        }

    }

}

</script>

<style>

h1{

    color: red

}

</style>

 

v-model 칸을 입력하면 모든 메세지가 변경된다(일시적)

 

 

v-model.lazy:   enter를 입력해야 반영   
v-model.number: 숫자만 반영
v-model.trim:   공백 제거 후 반영

<template>

  <div>

<!--

    v-model.lazy:   enter를 입력해야 반영

    v-model.number: 숫자만 반영

    v-model.trim:   공백 제거 후 반영

-->

v-model<input type="text" v-model="lazy">{{ lazy }}<br>

v-model.lazy<input type="text" v-model.lazy="lazy">{{ lazy }}<br>

<hr>

v-model<input type="text" v-model="number">{{ number }}<br>

v-model.number<input type="text" v-model.number="number">{{ number }}<br>

<hr>

v-model<input type="text" v-model="trim">{{ trim }}<br>

v-model.trim<input type="text" v-model.trim="trim">{{ trim }}<br>

  </div>

</template>

<script>

export default {

    data: function(){

        return {

            lazy: "엔터를 쳐야 반영",

            number: "abcd1234",

            trim: "공백 제거 후 반영                   "

        }

    }

}

</script>

<style>

h1{

    color: red

}

</style>

 

number와 trim은 반영이 좀 늦다

 

Select
- 기본값 지정이 필요하다

<template>

  <div>

    <select v-model="mesg">

        <option>10</option>

        <option>20</option>

        <option>30</option>

        <option>40</option>

    </select>

<br>

    <input type="text" v-bind:value="mesg"><br>

    <input type="text" v-model="mesg"><br>

        {{ mesg }}

  </div>

</template>

<script>

export default {

    props:{

    },

    data: function(){

        return {

            mesg: "20"          //기본값 지정 필요

        }

    }

}

</script>

<style>

h1{

    color: red

}

</style>

 

 

 

checkbox

 

<template>

  <div>

    <input type="checkbox" v-model="fruit" value="사과">사과<br>

    <input type="checkbox" v-model="fruit" value="배">배<br>

    <input type="checkbox" v-model="fruit" value="바나나">바나나<br>

    <input type="checkbox" v-model="fruit" value="수박">수박<br>

      <hr>

      선택한 과일은: <br>

        {{ fruit }}

  </div>

</template>

<script>

export default {

    data: function(){

        return {

            fruit: []          //자동으로 배열에 들어감

        }

    }

}

</script>

<style>

h1{

    color: red

}

</style>