Vue 데이터 바인딩-html/input/select

Vue 데이터 바인딩-html/input/select

 

HTML 데이터 바인딩

 

<template>
  <div>{{htmlString}}</div>
</template>
<script>
export default {
  name: 'dataBindingHtml',
  components: {},
  data() {
    return {
      htmlString: '<p style="color:red">This is a red String</p>',
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmouted() {},
  methods: {},
};
</script>

위처럼 적으면 화면에는 붉은색 글자가 출력되는 대신

<p style="color:red">This is a red String</p>

라고 출력 된다. 태그와 속성을 포함한 데이터 바인딩을 하기 위해서는 아래와 같이 template 태그 안의 코드를 수정해야 한다.

<template>
  <div v-html="htmlString"></div>
</template>

위처럼 vue에서 html을 바인딩하기 위해서는 태그안 v-html이라는 속성에 data 명을 적어줘야한다.

 

Input 데이터 바인딩

Input태그를 넣은 컴포넌트를 하나 만들어보자.

<template>
  <div>
    <input type="text" />
  </div>
</template>
<script>
export default {
  name: 'inputBinding',
  components: {},
  data() {
    return {};
  },
  setup() {},
  created() {},
  mounted() {},
  unmouted() {},
  methods: {},
};
</script>

input 태그의 value라는 속성에 대해 vue에서는 v-model 속성을 써서 데이터 값을 넣을 수 있다.

<template>
  <div>
    <input type="text" v-model="valueModel" />
    <p>{{ valueModel }}</p>
  </div>
</template>
<script>
export default {
  name: 'inputBinding',
  components: {},
  data() {
    return {
      valueModel: 'ice cream',
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmouted() {},
  methods: {},
};
</script>

위와 같이 적은뒤 input 값을 변경하면 p태그의 값도 함께 변하는 모습을 볼 수 있다.

또는 콘솔로도 값을 확인가능한데,mounted 메소드 안에 명령어를 아래와 같이 적으면 된다.

  mounted() {
    console.log(this.valueTxtModel);
  },

여기서 주의 할 점은 data의 return 안에 정의한 객체들은 메소드 내에서 불러올 때 앞에 this. 을 붙여야 접근 가능하다는 점이다.

이와 같은 방식으로 number 타입 input 역시 다룰 수 있다. 다만 vue에서는 사용자가 입력한 숫자 값은 문자열로 취급하기 때문에 아래와 같이 v-model.number 속성으로 data에 접근해야한다.

    <input type="number" v-model.number="valueNumModel" />

이 속성은 들여오는 데이터 타입을 number 형식으로 정의해준다.

이러한 v-model을 사용한 input바인딩 방식은 textarea 태그에도 사용가능하다.

<template>
  <div>
    <input type="text" v-model="valueTxtModel" />
    <p>{{ valueTxtModel }}</p>
    <input type="number" v-model.number="valueNumModel" />
    <p>{{ valueNumModel }}</p>
    <textarea v-model="valueAreaModel"></textarea>
    <p>{{ valueAreaModel }}</p>
  </div>
</template>
<script>
export default {
  name: 'inputBinding',
  components: {},
  data() {
    return {
      valueTxtModel: 'ice cream',
      valueNumModel: 0,
      valueAreaModel: 'Hello',
    };
  },
  setup() {},
  created() {},
  mounted() {
    console.log(this.valueTxtModel);
  },
  unmouted() {},
  methods: {},
};
</script>

Select 데이터 바인딩

template 태그에 select태그를 넣고 option을 넣어주자.

<template>
  <div>
    <select>
      <option value="02">서울</option>
      <option value="21">부산</option>
      <option value="064">제주</option>
    </select>
  </div>
</template>

select 태그 역시 데이터 바인딩을 위해 v-model 속성을 사용한다. data에 city:"064"를 넣고 select 태그에 바인딩 해보자.

<template>
  <div>
    <select v-model="city">
      <option value="02">서울</option>
      <option value="21">부산</option>
      <option value="064">제주</option>
    </select>
  </div>
</template>
<script>
export default {
  name: 'selectBinding',
  components: {},
  data() {
    return {
      city: '064',
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmouted() {},
  methods: {},
};
</script>

위 코드를 실행해 보면 화면에 제주 옵션이 기본적으로 선택되어있다. 선택된 옵션을 바꾸면 개발자 모드의 vue탭(크롬 익스텐션 Vue Devtools 사용)에서 city의 값 역시 변경 되는 것을 볼 수 있다.

이번에는 checkbox에 데이터 바인딩을 해보자.

<template>
  <div>
    <select v-model="city">
      <option value="02">서울</option>
      <option value="21">부산</option>
      <option value="064">제주</option>
    </select>
    <label> <input type="checkbox" v-model="checked" />{{ checked }} </label>
  </div>
</template>
<script>
export default {
  name: 'selectBinding',
  components: {},
  data() {
    return {
      city: '064',
      checked: true,
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmouted() {},
  methods: {},
};
</script>

위 코드를 실행 시키면 체크박스는 선택되었을 때 옆에 true가 출력되고, 선택 해제 하면 false가 출력 되는 것을 볼 수 있다. 체크박스의 값은 checked 여부의 true/false와 직접적으로 연결된다.

이번에는 체크박스에 배열값을 연결해보자.

 <label>
      <input type="checkbox" value="서울" v-model="checked" />서울
    </label>
    <label>
      <input type="checkbox" value="부산" v-model="checked" />부산
    </label>
    <label>
      <input type="checkbox" value="제주" v-model="checked" />제주
    </label>
    <br />
    <span>체크한 지역:{{ checked }} </span>
    .
    .
    .
      data() {
    return {
      city: '064',
      checked: [],
    };
     },

프로그램을 실행해보고 체크를 하면 span 태그에 체크한 지역들이 나타난다.

체크한 지역:[ "서울", "부산", "제주" ]

이렇게 체크박스를 이용할때는 값을 배열로 바인딩 할 수 있다.

이번에는 라디오 버튼 처리 방법을 보자.

    <label> <input type="radio" value="초코" v-model="radio" />초코 </label>
    <label> <input type="radio" value="바닐라" v-model="radio" />바닐라 </label>
    <label> <input type="radio" value="딸기" v-model="radio" />딸기 </label>
    <br />
    <span>체크한 맛:{{ radio }} </span>

그리고 data의 return에 다음 객체를 추가해 보자.

      radio:"",

실행해보면 선택한 값이 span 태그에 출력 된다.

체크한 맛:바닐라

만약 value속성을 바인딩하고 싶다면 v-bind:속성을 사용하면 된다.

    <label>
      <input type="radio" v-bind:value="flavour01" v-model="radio" />초코
    </label>
    <label>
      <input type="radio" v-bind:value="flavour02" v-model="radio" />바닐라
    </label>
    <label>
      <input type="radio" v-bind:value="flavour03" v-model="radio" />딸기
    </label>
    <br />
    <span>체크한 맛:{{ radio }} </span>
    .
    .
    .
      data() {
    return {
      radio: '',
      flavour01: '초코',
      flavour02: '바닐라',
      flavour03: '딸기',
    };

여전히 체크하면 각각 바인딩 된 값을 가져오는 것을 볼 수 있다.

또 다른 바인딩 방법은 배열로 객체를 선언하는 것이 있다.

 <label>
      <input type="radio" v-bind:value="flavour[0]" v-model="radio" />초코
    </label>
    <label>
      <input type="radio" v-bind:value="flavour[1]" v-model="radio" />바닐라
    </label>
    <label>
      <input type="radio" v-bind:value="flavour[2]" v-model="radio" />딸기
    </label>
    <br />
    <span>체크한 맛:{{ radio }} </span>
    .
    .
    .
    data() {
    return {
      checked: [],
      radio: '',
      //   flavour01: '초코',
      //   flavour02: '바닐라',
      //   flavour03: '딸기',
      flavour: ['초코', '바닐라', '딸기'],
    };
  },

이렇게 지정하면 각 배열의 인덱스에 해당하는 value에 바인딩 되는 것을 볼 수 있다.