Vue js 2 v-bind

 

v-bind 는  html 테그에 데이터를 바인딩 할 때 사용 합니다.

 

<template>
  <div>
    <input type="text" v-bind:value="name">
    <input type="text" :value="name">
    <input type="text" :value="hello()">
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      name : 'codeGray',
    }
  },
  methods : {
    hello(){
      return '안녕하세요 ' + this.name + ' 입니다.';
    }
  }
  
  
}
</script>

 

기존 html처럼 고정 값일때는  <input type="text" value="안녕하세요"> 이런 식으로 사용해도 됩니다.

 

data에 선언한 값이나, methods에 선언한 메서드를 사용하려면 value 속성 앞에 v-bind: 를 붙이고 메서드나, data에 

 

정의해놓은 변수를 사용하시면 됩니다.

 

v-bind: 를 줄여서 : 로 대체 가능 합니다.