v-model 양 방향 데이터 바인딩

김석환·2020년 9월 18일
0

Vue

목록 보기
3/5
post-thumbnail

어디에 쓰는 물건인고?

우리가 지금까지 만들었던 프로젝트는 단방향 바인딩의 예이다.
데이터->뷰의 형태로 바인딩이 되어있어 데이터의 값이 변하면
바로바로 업데이트 된다. 한방향으로만 데이터가 흐른다는 이야기이다.

그렇다면 양방향 바인딩은 뷰->데이터 , 데이터->뷰로 데이터가 양 방향으로 흐르게 되는 것이다. 즉 데이터에 있는 값이 뷰에 나타나고 이 뷰의 값이 바뀌면 데이터의 값도 바뀌는 것이다.

사용하기

<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js Sample</title>
    <link rel="stylesheet" href="./main.css">
  </head>
  <body>
    <div id="app">
      <h1>Hello {{name}}</h1>
      <input type="text" v-model="name">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./index.js"></script>
</body>
</html>
var app = new Vue({
    el: "#app",
   data: {
     name : "vue"
   }
});

input태그에 v-model을 설정함으로써 이 input엘리먼트의 값이 업데이트되면 name 값이 자동으로 바뀌게 한 것이다.

응용하기

전에 만들었던 hi의 값에따라 사진이 바뀌어 보였던 예제에 응용할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js Sample</title>
    <link rel="stylesheet" href="./main.css">
  </head>
  <body>
    <div id="app">
      <h1>Hello {{name}}</h1>
      <h2>{{Date()}}</h2>
      <h3><input type="checkbox" v-model="hi">안녕?</h3>
      <img :src="hi ? sayHello : sayGoodBye" alt=""/>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./index.js"></script>
</body>
</html>
var app = new Vue({
    el: "#app",
   data: {
       name : "Vue",
       hi : true,
       sayHello: 'https://www.himgs.com/imagenes/hello/social/hello-fb-logo.png',
       sayGoodBye: 'https://st2.depositphotos.com/1896403/6729/i/950/depositphotos_67297861-stock-photo-time-to-say-goodbye-message.jpg'
    }
});

위 코드를 작성하면 checkbox가 활성화되면 Hello 비활성화되면 Goodbye가 된다.

마무리

드디어 Vue에서 인터렉션을 만들 수 있게 되었다.
v-model 디렉티브는 이렇게 폼에 관련된 태그<input> <select> <textarea> 등에서만 사용가능하다.

0개의 댓글