v-model

양방향 데이터 바인딩을 처리하는 디렉티브입니다.

v-model로 폼 요소 제어하기

input

<script>
export default {
  data() {
    return {
      userId: "test",
    };
  },
};
</script>

<template>
  <div>
    <label>ID</label>
    <input type="text" v-model="userId" />
  </div>
</template>

textarea

<script>
export default {
  data() {
    return {
      directiveName: "v-model",
      str: "여러 줄 바꿈\n텍스트에어리어",
    };
  },
};
</script>

<template>
  <div>
    <h1>{{ directiveName }}</h1>
    <textarea v-model="str" />
  </div>
</template>

select

<script>
export default {
  data() {
    return {
      food: "바나나",
    };
  },
};
</script>

<template>
  <div>
    <label>ID</label>
    <select v-model="food">
      <option value="사과">사과</option>
      <option value="바나나">바나나</option>
      <option value="멜론">멜론</option>
    </select>
  </div>
</template>

checkbox

<script>
export default {
  data() {
    return {
      checked: true,
    };
  },
};
</script>

<template>
  <div>
    <input type="checkbox" v-model="checked" />
  </div>
</template>

checkbox는 체크가 되었을 때의 값과 안되었을때의 값을 따로 지정할 수도 있습니다.

<script>
export default {
  data() {
    return {
      checked: "참",
    };
  },
};
</script>

<template>
  <div>
    <input
      type="checkbox"
      v-model="checked"
      true-value="참"
      false-value="거짓"
    />
    {{ checked }}
  </div>
</template>

여러개의 checkbox

<script>
export default {
  data() {
    return {
      checked: [],
    };
  },
};
</script>

<template>
  <div>
    <label
      ><input type="checkbox" v-model="checked" value="사과" /> 사과
    </label>
    <label
      ><input type="checkbox" v-model="checked" value="바나나" />바나나</label
    >
    <label><input type="checkbox" v-model="checked" value="멜론" />멜론</label>
    <p>{{ checked }}</p>
  </div>
</template>

radio

<script>
export default {
  data() {
    return {
      checked: "",
    };
  },
};
</script>


<template>
  <div>
    <label><input type="radio" v-model="checked" value="사과" /> 사과 </label>
    <label><input type="radio" v-model="checked" value="바나나" />바나나</label>
    <label><input type="radio" v-model="checked" value="멜론" />멜론</label>
    <p>{{ checked }}</p>
  </div>
</template>