[Vue.js] Vue3 데이터 바인딩

버튼을 누르면  '대기중'이 '준비완료'로 바뀐다. 

 

<template>
  <div class="name"> {{ name }} </div>
  <button v-on:click="updateName" class="edit_button">준비버튼</button>
</template>

<script lang="ts">
import { ref } from 'vue';

export default {
  setup() {
    const name = ref('대기중');
    const updateName = () => {
      name.value = '준비완료';
      console.log(name);
    };
    return {
      name,
      updateName,
    };
  }
};
</script>

<input type="text" v-bind:value="name"> 이렇게 쓰면 name 변수의 값이 들어온다.

<input type="text" value="name"> 이렇게 쓰면 'name'이라는 스트링이 들어온다.

이런식으로 input의 value도 바꿀 수 있지만 type도 바꿀 수 있다.

나도 풀 수 있으니 잠시 생각해보자.

 

이정도도 못 풀면 깜장발이 아니지!

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

 

이제 실력이 들통났군

const type = ref('text'); <---- number로 바꾸면 됨

return {

    type, };