[Vue] 사용자 입력 연결

v-model

- 사용자의 입력을 Vue 인스턴스의 데이터에 연결

- Vue인스턴스의 데이터가 웹 페이지에 표시되고 웹 페이지에서 입력한 값이 Vue인스턴스의 데이터에 반영되므로

  양방향 바인딩 이라고도 한다.

- <태그명 v-model="프로퍼티명">

---

input태그 - text

- input태그의 텍스트를 Vue인스턴스 데이터와 연결하면 사용자가 텍스트를 입력하고 있는 중에도 데이터는 갱신된다.

- <input v-model="프로퍼티명">

<h2>입력한 문자열을 표시하는 예제</h2>
<div id="app">
    <input v-model="myName" placeholder="이름">
    <p>나는 {{ myName }} 입니다.</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            myName:''
        }
    })
</script>

 

input태그 - radio

- input 태그의 라디오 버튼값을 Vue 인스턴스의 데이터로 연결할 수 있다.

- v-model에 동일한 프로퍼티명을 지정하면 하나의 그룹으로 묶인다.

- value값을 통해 어떤것이 선택되었는지 전달된다.

- img태그의 src속성의 값과 radio의 value값을 연결하면 라디오버튼의 선택값에 따라 이미지를 변경할 수 있다.

- <input type="radio" value="값1" v-model="동일한프로퍼티명(같은그룹)">

<div id="app">
    <h2>선택한 라디오 버튼을 표시하는 예제</h2>
    <label><input type="radio" value="red" v-model="picked" /> 적 </label>
    <label><input type="radio" value="green" v-model="picked" /> 녹 </label>
    <label><input type="radio" value="blue" v-model="picked" /> 청 </label>
    <p>{{ picked }} 이 선택됨</p>

    <h2>이미지 출력을 라디오버튼으로 변경하는 예제</h2>
    <label><input type="radio" value="face1.png" v-model="fileName" /> face1 </label>
    <label><input type="radio" value="face2.png" v-model="fileName" /> face2 </label>
    <br />
    <p>{{ fileName }} 선택</p>
    <p> <img v-bind:src="fileName" /> </p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            picked: 'red',
            fileName: "",
        }
    })
</script>

 

input태그 - checkbox

- input태그의 체크박스 값을 Vue 인스턴스의 데이터와 연결할 수 있다.

- 값은 true/false 로 불린값이다. 

- 체크박스 하나의 값을 데이터와 연결할 수 있으며 복수의 체크박스 값을 데이터와 연결할 수 도 있다.

- <ipnut type="checkbox" v-model="프로퍼티명">

<div id="app">
    <h2>체크박스의 ON/OFF를 확인하는 예제</h2>
    <label>
        <input type="checkbox" v-model="myCheck"> 체크박스의 상태는 {{ myCheck }}
    </label>  
    
    <h2>복수 체크박스의 ON을 배열로 만드는 예제</h2>
    <label><input type="checkbox" value="red" v-model="myChecks" /> 적 </label>
    <label><input type="checkbox" value="green" v-model="myChecks" /> 녹 </label>
    <label><input type="checkbox" value="blue" v-model="myChecks" /> 청 </label>
    <br />
    선택한 색은 {{ myChecks }}
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            myCheck: false,
            myChecks:[]
        }
    })
</script>

 

button 태그

- 버튼 태그의 v-bind:disable을 체크박스값을 이용하여 설정하면 버튼 활성/비활성을 지정할 수 있다.

- <button v-bind:disable="프로퍼티명(true/false)"></button>

<h2>동의에 체크하면 송신 버튼이 활성화 되는 예제</h2>
<div id="app">
    <label><input type="checkbox" v-model="myAgree" >
    동의합니다.</label>
    <button v-bind:disabled="myAgree==false">송신</button>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            myAgree: false
        }
    })
</script>

 

textarea태그

- textarea태그의 복수행 텍스트를 Vue인스턴스의 데이터로 연결할 수 있다.

- 입력과 동시에 데이터는 갱신된다.

- {{프로퍼티명.length}}를 이용하면 입력한 데이터의 글자 수를 알 수 있다.

- <textarea v-model="프로퍼티명"></textarea>

<h2>입력한 문장과 문자수를 표시하는 예제</h2>
<div id="app">
    <textarea  v-model="myText"></textarea>
    <p>문장은,「{{ myText }}」</p>
    <p>문자수는 {{ myText.length }} 자입니다.</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            myText:'오늘 날씨 좋습니다.'
        }
    })
</script>

 

select태그

- select 태그의 값을 Vue 인스턴스의 데이터와 연결하는것도 가능하다.

- 선택한 하나의 값만 Vue 인스턴스 데이터와 연결된다.

- 복수의 값을 선택하고 싶다면 multiple을 적어야한다.

- <select v-model="프로퍼티명"> <option> 선택값 1 </option> </select>

- <select v-model="프로퍼티명 multiple> <option> 선택값 1 </option></select>  <!-- 복수의 값을 선택할때 -->

<div id="app">
    <h2>문자열이 선택한 색으로 변하는 예제</h2>
    <select v-model="myColor">
        <option disabled value="">색을 선택해 주세요</option>
        <option>red</option>
        <option>green</option>
        <option>blue</option>
        <option>orange</option>
        <option>brown</option>
    </select>
    <p v-bind:style="{color: myColor}">선택한 색상은 {{ myColor }} 입니다. </p>

    <h2>복수의 선택을 배열로 처리하는 예제</h2>
    <select v-model="myColor2" multiple style="width:150px">
        <option>red</option>
        <option>green</option>
        <option>blue</option>
        <option>orange</option>
        <option>brown</option>
    </select>
    <p>선택한 색은 {{ myColor2 }}　입니다.</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            myColor: '',
            myColor2: []
        }
    })
</script>

 

수식어

- v-model에 수식어를 붙이면 몇가지 기능을 지정하는 것이 가능하다.

- 다 쓰고나서 vue 인스턴스에 입력하고 싶을 때 :  <input v-model.lazy="프로퍼티명">

- 입력 내용을 자동으로 수식으로 변경하고 싶을 때 : <input v-model.number="프로퍼티명">

- 앞뒤 공백을 자동으로 제거하고 싶을 때 : <input v-model.trim="프로퍼티명">

<div id="app">
    <h2>다 쓴 후 입력 예제</h2>
    <input v-model.lazy="myTextLazy" />
    <p>입력후 표시「{{ myTextLazy }}」</p>

    <h2>입력을 자동으로 수식으로 변경하는 예제</h2>
    <input v-model.number="myTextNumber1" type="number" />
    <p>100을 더해서 표시「{{ 100 + myTextNumber1 }}」</p>

    <h2>입력을 자동으로 수식으로 변경하지 않는 예제</h2>
    <input v-model="myTextNumber2" type="number" />
    <p>
    100을 더해서 표시「{{ 100 + myTextNumber2 }}」 <!-- 입력받은 값이 숫자가 아닌 문자로 인식됨 -->
    </p>
    
    <h2>앞뒤의 공백을 자동으로 제거하는 (트림) 예제</h2>
    <input v-model.trim="myTextTrim1" />
    <p>앞뒤 공백을 제거「{{ myTextTrim1 }}」</p>
    
    <h2>앞뒤의 공백을 자동으로 제거(트림) 하지 않는 예제</h2>
    <input v-model="myTextTrim2">
    <p>앞뒤의 공백을 제거「{{ myTextTrim2 }}」</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        myTextLazy: "",
        myTextNumber1: 0,
        myTextNumber2: 0,
        myTextTrim1: "",
        myTextTrim2: ""
    }
})
</script>