Vue.js 강좌 심화 양방향 바인딩 v-model 08

이전 강의

2022.12.27 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 양방향 바인딩 v-model 07

Vue.js 강좌 양방향 바인딩 v-model 07

Vue.js 강좌 양방향 바인딩 v-model 07 이전강의 2022.12.26 - [Web Front 개발공부/Vue.js] - Vue.js 강좌 뷰 인스턴스 06 Vue.js 강좌 뷰 인스턴스 06 Vue.js 강좌 뷰 인스턴스 06 이전 강좌 2022.12.25 - [Web Front 개발공

ecolumbus.tistory.com

실행 (오늘 구현해볼 기능)

이전 포스팅에 이어 v-model 심화 학습을 한다.

1. 체크박스 체크 시 참, 거짓 boolean 상태 값

2. 복수의 체크박스 배열

3. 체크박스 선택 결과에 따라 버튼 활성화 및 비활성화

여러가지 v-model 바인딩

소스

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.js sample</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            new Vue({
                el: "#app",
                data: {
                    myCheck:false,
                    arrayCheck:[],
                    myAgree:false
                },
                methods: {
                    handleClick: function () {
                        alert('전송했습니다');
                    }
                }
            })
        }
    </script>
</head>
<body>
<h2>Vue.js 강좌 여로가지 콤포넌트, 양방향 바인딩 v-model 08</h2>
<div id="app">
    <p>1. Boolean 참, 거짓 체크박스</p>
    <label>
        <input type="checkbox" v-model="myCheck">
        체크박스의 상태는 : {{ myCheck }}
    </label>
    
    <p>2. 복수의 체크박스</p>
    <label><input type="checkbox" v-model="arrayCheck" value="red">빨강</label>
    <label><input type="checkbox" v-model="arrayCheck" value="blue">파랑</label>
    <label><input type="checkbox" v-model="arrayCheck" value="yellow">노랑</label>
    <p>선택한 색은 : {{arrayCheck}}</p>
    
    <p>3. 동의 체크박스에 따른 버튼 활성/비활성화</p>
    <label><input type="checkbox" v-model="myAgree">동의합니다</label>
    <button v-bind:disabled="myAgree==false" v-on:click="handleClick">보내기</button>
</div>
</body>
</html>

설명

1. 체크박스를 하나만 사용. 태그에 명시적 value가 없을 경우에는 true, flase를 리턴한다.

<input type="checkbox" v-model="myCheck">

2. 체크박스를 여러 개 만들고 value 값을 명시적으로 지정하고 체크를 하게 되면 명시적 값을 리턴한다.

이때 v-model 의 연결된 데이터는 arrayCheck[] 배열이다.

<input type="checkbox" v-model="arrayCheck" value="파랑">

추가 실습

예제는 select 태그 단일 값만 리턴을 했지만,

select 태그에 multiple 옵션을 주게 된다면 복수의 선택이 가능하게 된다.

    <p>4. select 문자열이 선택한 색으로 변하는 예제</p>
    <select v-model="myColor">
        <option disabled value="">선택해주세요</option>
        <option>red</option>
        <option>blue</option>
        <option>green</option>
    </select>
    <p v-bind:style="{color: myColor}">선택한 색상은 {{myColor}}</p>
    
   생략----------------------------------------------------------------
   
       new Vue({
                el: "#app",
                data: {
                    myCheck:false,
                    arrayCheck:[],
                    myAgree:false,
                    myColor:[]
                },
                methods: {
                    handleClick: function () {
                        alert('전송했습니다');
                    }
                }
            })

2회에 걸쳐 v-model을 이용해 Vue.js 인스턴스의 data에 정의한 변수와 Html 콤포넌트 태그들과의 양방향 바인딩에 대해 알아봤다.

글이 유용했거나 도움이 되셨다면 공감 클릭부탁합니다.

저작자표시 비영리 변경금지

'Web Front 개발공부 > Vue.js' 카테고리의 다른 글

Vue.js 강좌 파라미터를 전달하여 이벤트 처리 v-on 10 (0)	2022.12.28
Vue.js 강좌 이벤트 처리 방법 v-on 09 (0)	2022.12.27
Vue.js 강좌 양방향 바인딩 v-model 07 (0)	2022.12.27
Vue.js 강좌 뷰 인스턴스 06 (0)	2022.12.26
Vue.js 강좌 Html 요소의 속성 지정 v-bind 05 (0)	2022.12.25

슬기로운 개발자 생활

Vue.js 강좌 심화 양방향 바인딩 v-model 08