양방향 데이터 바인딩

Vue.js는 양방향 데이터 바인딩을 지원하기 때문에,

입력 요소와 연결된 데이터 속성을 업데이트하는 것이 쉬운편이다.

버튼을 클릭하면 해당 데이터 속성 값을 가져와서 input 요소에 할당할 수 있다.

<template>
  <div>
    <div>
      <div>가진 돈</div>
      <div>
        <span>{{ money }}</span> <span>P</span>
      </div>
    </div>
    <div>
      <input
        type="number"
        placeholder="숫자만 입력하세요"
        v-model="inputValue"
      />
      <button
        @click="maxMoney"
      >
        모두
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: 10000, // 임의의 값
      inputValue: "",
    };
  },
  methods: {
    maxMoney() {
      this.inputValue = this.money;
    }
  }
};
</script>