[Vue.js] Vue 데이터 바인딩(binding) - 문자열 / input / textarea / select 바인딩

 

- 문자열 데이터 바인딩

{{}} 이중 중괄호를 이용하여 데이터 바인딩

<template>
  <h1>Hello, {{title}}!</h1>
</template>

 

- HTML 데이터바인딩

v-html 디렉티브 사용 

<template>
  <div>
    <div>{{htmlString}}</div>
    <div v-html="htmlString"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      htmlString: '<p style="color:red;">This is a red string</p>'
    }
  }
}
</script>

결과

 

- input 태그에 바인딩

> type="text"

v-model 디렉디브 사용

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

> type="number"

v-model.number 디렉티브 사용 - 입력값이 문자가 아닌 숫자로 관리됨

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

결과

> type="checkbox" / type="radio"

v-model은 checked 속성을 사용 / value속성에 바인딩 하려면 v-bind:value 사용 

<template>
  <div>
    <label><input type="checkbox" v-model="checked" true-value="yes" false-value="no"> {{checked}}</label>
    <hr>
    <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 {
      checked: true,
      picked: '',
      radioValue1: '서울',
      radioValue2: '부산',
      radioValue3: '제주'
    }
  }
}
</script>

결과

 

- textarea에 바인딩

v-model 디렉티브 사용

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

결과

 

- select 태그에 바인딩

v-model 디렉티브 사용 / option의 value의 값과 바인딩

<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>

결과