[Vue.js] 폼 입력값의 v-model

    v-model modifier 

v-model.trim -> 앞뒤로 공백을 없애준다.

v-model.number -> type="text"라도 String이 아니라 Number로 반환된다.

v-model.lazy -> 다 쳐야 나온다.

 

    v-model의 사용처

textarea, selection, checkbox, radio button 등 입력하는 애들

 

    Input Text

 

    Radio Button

양방향 바인딩

v-model="변수"

<template>
<div style="margin: auto; width: 200px; height: 200px;">
  <h1> {{ header }}</h1>
  <input v-model.number="newItem"  type="text"> 
  <div>{{ newItem }}</div>
  ssr티어:
  <label>
    <input type="radio" v-model="newItemPriority" value="상위티어">
  상위
  </label>
  <label>
    <input type="radio" v-model="newItemPriority" value="하위티어">
    하위
  </label>
  <div>{{ newItemPriority}}</div>
  <ul style="text-align: left;">
    <li v-for="({id, label}, index) in items" v-bind:key="id"> {{ index }} {{ label }}</li>
  </ul>
</div>
</template>

<script setup>
import { ref } from 'vue'
const newItem = ref('');
const header = ref('보유 SSR영웅');
const newItemPriority = ref('low');
const items = ref([
  {id: 1, label:"크리스티아네",},
  {id: 2, label:"쉐리",},
  {id: 3, label:"엘윈",},
]);
</script>

<style>
#app {
  text-align: center;
}
</style>

    CheckBox Boolean Toggle

<input type="checkbox" v-model="tier" value="상위">

const tier = ref('false');

 

     CheckBox List

 

<input type="checkbox" v-model="chamRole" value="탱커">

const chamRole = ref([]);

 

    v-model로 받아온 값 저장하기

<input type="test" v-model.trim="champion">

<button @click="items.push({id: items.length + 1, label: champion})"> 저장하기 </button>

const champion = ref(''); 

const items = ref([ {id: 1, label:"크리스티아네"} ]