Vue 데이터 바인딩 문법

html 데이터 바인딩

// /views/DataBindingHtml
<template>
<div>
  <div>{{htmlString}}</div> 문자열 데이터 바인딩
  <div v-html="htmlString"></div> html 코드 바인딩
</div>
</template>
<script>
export default {
  data() {
    return {
      htmlString: '<p style="color:red;">This is a red string.</p>'
    };
  }
}
</script>

form element에서 value는 v-model 디렉티브를 이용

input text 데이터 바인딩

// /views/DataBindinginputtext
<template>
<div>
  <input type="text" v-model="valueModel" />
</div>
</template>
<script>
export default {
 data() {
   return {
     valueModel: 'South Korea'
   };
 }
}
</script>

input number 데이터 바인딩

// /views/DataBindinginputnumber
<template>
<div>
  <input type="number" v-model.number="numberModel" />
</div>
</template>
<script>
export default {
 data() {
   return {
     numberModel: 3
   };
 }
}
</script>

textarea 데이터 바인딩

// /views/DataBindingTextarea
<template>
<div>
  <textarea v-model="message"></textarea>
</div>
</template>
<script>
export default {
 data() {
   return {
     message: "여러줄을 입력할 수 있는 textarea 입니다."
   };
 }
}
</script>

select 데이터 바인딩

// /views/DataBindingSelect
<template>
<div>
  <select v-model="city">
    <option value="02">서울</option>
    <option value="21">부산</option>
    <option value="064">제주</option>
  </select>
</div>
</template>
<script>
export default {
 data() {
   return {
     city: "064"
   };
 }
}
</script>

input, select와 달리 checkbox는 v-model이 checkbox의 value가 아닌 checked 속성을 사용하기 때문에 value 속성에 데이터 바인딩을 하려면 v-model이 아닌 v-bind:value를 사용해야 함. value를 쓸수도 있는데 value는 문자열을, v-bind:value는 변수를 값으로 받는다.

checkbox 데이터 바인딩

// /views/DataBindingCheckbox
<template>
<div>
  <label><input type="checkbox" v-model="checked" true-value="yes" false-value="no"> {{ checked }}</label>
</div>
</template>
<script>
export default {
 data() {
   return {
     checked: true
   };
 }
}
</script>

checkbox2 데이터 바인딩

// /views/DataBindingCheckbox2
<template>
<div>
   <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> // 배열이 그냥 문자열로 나와버림.
</div>
</template>
<script>
export default {
 data() {
   return {
     checked: []
   };
 }
}
</script>

radio 역시 checkbox와 마찬가지로 v-model이 checkbox의 value가 아닌 checked 속성을 사용하기 때문에 value 속성에 데이터 바인딩을 하려면 v-model이 아닌 v-bind:value를 사용해야 함.

radio 데이터 바인딩

// /views/DataBindingRadio
<template>
<div>
  <label><input type="radio" v-bind:value="radioValue1" v-model="picked"> 서울</label>
  <label><input type="radio" v-bind:value="radioValue2" v-model="picked"> 부산</label>
  <label><input type="radio" v-bind:value="radioValue3" v-model="picked"> 제주</label>
  <br>
  <span>선택한 지역: {{ picked }}</span>
</div>
</template>
<script>
export default {
data() {
  return {
    picked: '',
    radioValue1: '서울',
    radioValue2: '부산',
    radioValue3: '제주',
  };
}
}
</script>