Vue3 데이터 바인딩 사용예제

vuejs 공식 홈페이지 문서

데이터 바인딩은 v-bind:ㅇㅇ  (이때 ㅇㅇ에는 id, name, value 등과 같은 엘리먼트가 들어간다)

로 사용이 가능하다

<template>
<div class ="container">
<div class="name">{{name}}</div>

<input type="text" v-bind:value="name">

<button class="btn btn-primary" v-on:click="updateName">
  버튼
</button>

</div>
</template>

<script>

import {ref} from 'vue'

export default {
setup()
{
  let name= ref("bbakssang");
  
  var  updateName = ()=>{
    name.value= "빡상"
    console.log(name)
  }

  return {
    name,updateName
  }; 
}
  
}
</script>

위 코드에서는 input 안의 value값이 name과 연계되는건데

 

클릭전

클릭후

와 같이 name변수에 따라 value값이 바뀌는것을 볼 수 있다

 

---

V-bind:type 예제

 

<template>
<div class ="container">
<div class="name">{{name}}</div>

<input v-bind:type="type" v-bind:value="name">

<button class="btn btn-primary" v-on:click="updateName">
  버튼
</button>

</div>
</template>

<script>

import {ref} from 'vue'

export default {
setup()
{
  let name= ref("bbakssang");
  let type = ref("number");
  
  var  updateName = ()=>{
    name.value= "빡상"
    console.log(name)
  }

  return {
    name,updateName,type,
  }; 
}
}
</script>

type = number로 ref변수를 지정해주고  input안에 type ="text" 를 type="type"으로 변경한뒤 실행해보면

이렇게 넘버 input 형식으로 바뀌는것을 볼 수 있다.

 

 

  var  updateName = ()=>{
    name.value= "빡상"
    type.value="text"

  }

클릭시 type.value를 text로 바꾸고 클릭해보면

number -> text박스로 바뀐것을 확인 할 수 있다

 

---

v-bind :  에서 v-bind는 생략이 가능하다 :class = :value = :name 다 사용 가능

 

v-on : 은 @로 대체 가능하다