자바 공부/[자바] 기본 공부

[Vue.js] form 요소 활용하기

햅2024 2024. 12. 4. 21:11

form  요소 활용하기

  • form 요소와 데이터 간의 연결은 v-model로 양방향 바인딩
  • text, <textarea>는 value 속성, input 이벤트
  • checkbox, radio checked 속성, change 이벤트
  • select는 value를 속성으로, change 이벤트
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Form Component</h1>
    <hr>
    <!--string-->
    <div id="formtest">
        <input type="text" v-model="message" placeholder="TEXT를 입력하세요">
        <p>입력된 메세지 : {{ message }}</p>
        <textarea v-model="message2"></textarea>
        <span>입력된 메세지</span>
        <p>{{message2}}</p>

        <!--checkbox-->
        <input type="checkbox" v-model="checked">
        <label for="checkbox">{{checked? '클릭함' : '해제함'}}</label>
        <hr>
        <br>여러분이 좋아하는 아티스트를 모두 고르시오.<br>
        <input type="checkbox" value="Picasso" v-model="artist">Picasso&nbsp;&nbsp;
        <input type="checkbox" value="Bach" v-model="artist">Bach&nbsp;&nbsp;
        <input type="checkbox" value="Mozart" v-model="artist">Mozart&nbsp;&nbsp;
        <br><span>현재 리스트: {{ artist }}</span>
    </div>
</body>
<script>
    var app9 = new Vue({
        el: '#formtest', 
        data:{
            message:'',
            message2:'',
            checked: false,
            artist: [] //[]: 배열 표기
        }
    });
</script>
</html>

 

radio 버튼

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Form Component</h1>
    <hr>
    <!--string-->
    <div id="formtest">
        <!--radio-->
        <span>오늘 저녁 뭐 사드릴까요?</span>
        <input type="radio" v-model="dinner" value="e">양식
        <input type="radio" v-model="dinner" value="k">한식
        <input type="radio" v-model="dinner" value="j">중식
        <br>당신의 선택 : {{ dinnerText }}
        <hr>
    </div>
</body>
<script>
    var app9 = new Vue({
        el: '#formtest', 
        data:{
            dinner:'h',
        },
        //dinner의 값에 따라 return 되는 단어를 변화시킨다
        computed: {
            dinnerText(){
                if(this.dinner == 'e') return '양식';
                else if (this.dinner == 'k') return '한식';
                else if(this.dinner == 'c') return '중식';
                else return '';
            }
        }
    });
</script>
</html>

 

Select

(1) Single

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Form Component</h1>
    <hr>
        <!--select-->
        <select v-model="selected">
            <option disabled value="">Select One</option>
            <option>Baseball</option>
            <option>Volleyball</option>
            <option>Basketball</option>
        </select>
        <br>오늘 볼 스포츠 : {{selected}}
    </div>
</body>
<script>
    var app9 = new Vue({
        el: '#formtest', 
        data:{
            selected: ''        
        }
    });
</script>
</html>

 

(2) 다중선택

  • 컨트롤 버튼을 누른 후 선택한다
  •  
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Form Component</h1>
    <hr>
    <!--string-->
    <div id="formtest">
        <!--select-->
        <select v-model="selected2" multiple>
            <option disabled value="">Select One</option>
            <option>Baseball</option>
            <option>Volleyball</option>
            <option>Basketball</option>
        </select>
        <br>오늘 볼 스포츠들 : {{selected2}}
    </div>
</body>
<script>
    var app9 = new Vue({
        el: '#formtest', 
        data:{
            selected2:[]
        }
    });
</script>
</html>

(3) 배열을 통한 select 만들기

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Form Component</h1>
    <hr>
    <!--string-->
    <div id="formtest">
        <select v-model="selected3">
            <option v-for="option in option3" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <br>오늘 들을 노래 : {{popText}}
        <br><br><br><br><br>
    </div>
</body>
<script>
    var app9 = new Vue({
        el: '#formtest', 
        data:{
            selected3:'K',
            option3:
            [
                {text: 'k-pop', value: 'K'},
                {text: 'Old-pop', value: 'O'},
                {text: 'Newage', value: 'N'}
            ]
        },
        computed: {
            popText()
            {
                if(this.selected3 == 'K') return 'kpop';
                else if(this.selected3 == 'O') return 'Old pop';
                else if(this.selected3 == 'N') return 'Newage';
            }
        }
    });
</script>
</html>

 

text에 숫자값으로 받기

  • v-model.number 로 선언해준다
  • parseInt로 형변환 한다
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Form Component</h1>
    <hr>
    <!--string-->
    <div id="formtest">
        당신의 현재 나이 : <input type="text" v-model.number="age">
        이 약을 먹으면 달라지는 나이 : {{ parseInt(age) + 3 }}<br>
        이 약을 먹으면 달라지는 나이 : {{ age + 3 }}<br>
        <br><br><br><br><br>
    </div>
</body>
<script>
    var app9 = new Vue({
        el: '#formtest', 
        data:{
            age: ''
        }
    });
</script>
</html>

text에 Trim 하는 법

  • v-model.trim 이용
  •  
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <h1>Form Component</h1>
    <hr>
    <!--string-->
    <div id="formtest">
        당신의 이름을 입력하시오 : <input type="text" v-model.trim="name"><br>
        당신의 이름은 : {{name}}<br>
        <br><br><br><br><br>
    </div>
</body>
<script>
    var app9 = new Vue({
        el: '#formtest', 
        data:{
            name: ''
        }
    });
</script>
</html>