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 개발공부/Vue.js] - Vue.js 강좌 Html 요소의 속성 지정 v-bind 05 Vue.js 강좌 Html 요소의 속성 지정 v-bind 05 Vue.js 강좌 Html 요소의 속성 지정 v-bind 05

ecolumbus.tistory.com

유저는 정보를 웹페이지에 입력하고 선택하기도 하고, 그 결과를 브라우저에서 볼 수도 있습니다.

이러한 기능을 가능하게 Vue.js는 v-model 디렉티브 기능을 제공합니다.

지금까지는 Vue 인스턴스의 데이터를 웹 페이지에 표시하는 방법을 알아봤습니다.

이번 포스팅에서는 입력 폼을 데이터와 연결해 봅니다.

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

양방향 바인딩이라고도 부릅니다.

폼 입력과 Vue 인스턴스의 데이터를 연결해주는 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: {
                    message:''
                }
            })
        }
    </script>
</head>
<body>
<h2>Vue.js 강좌 양방향 바인딩 v-model 07</h2>
<div id="app">
    <input v-model="message" placeholder="메세지 입력">
    <p>입력된 메세지 : {{message}}</p>
</div>
</body>
</html>

실행화면

설명

input 태그에 v-model:"message"으로 지정하면 입력된 문자열이 message에 들어가게 됩니다. {{message}}에 실시간으로 출력되는 것을 볼 수 있습니다.

textarea 태그도 구현해 봅니다.

    <script>
        window.onload = function () {
            new Vue({
                el: "#app",
                data: {
                    message:'',
                    myText:''
                }
            })
        }
    </script>
    
<body>
<h2>Vue.js 강좌 양방향 바인딩 v-model 07</h2>
<div id="app">
    <input v-model="message" placeholder="메세지 입력">
    <p>입력된 메세지 : {{message}}</p>
    <textarea v-model="myText"></textarea>
    <p>입력한 문장자 : {{myText}}</p>
    <p>입력된 문자수는 : {{ myText.length }} 입니다.</p>
</div>
</body>

다음 강좌에서는 체크박스(checkbox), 선택(selecet)을 바인딩하고 컨트롤하는 기능을 구현해 봅니다.

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

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

Vue.js 강좌 이벤트 처리 방법 v-on 09 (0)	2022.12.27
Vue.js 강좌 심화 양방향 바인딩 v-model 08 (0)	2022.12.27
Vue.js 강좌 뷰 인스턴스 06 (0)	2022.12.26
Vue.js 강좌 Html 요소의 속성 지정 v-bind 05 (0)	2022.12.25
Vue.js 강좌 사용가능한 데이터형(타입)과 종류 04 (2)	2022.12.25

슬기로운 개발자 생활

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