반응형
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id = "app1">
            <textarea v-model = "message" placeholder = "add multiple lines" rows = 5 cols = 30></textarea>
            <br>
            <span> Multiline message is : </span>
            <p style="white-space: pre-line"> {{ message }} </p>
        </div>
        
 
        <script>
            var vm = new Vue({
                el : '#app1',
                data:{
                    message : ""
                }
            })
        </script>
    </body>
</html>
 
cs


textarea를 이용하여 message 데이터에 여러줄에 걸친 데이터도 보낼 수 있다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
// checkbox 엘리먼트 예제
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id = "app">
            <input type="checkbox" id = "checkA" v-model = "checkedA">
            <label for="checkbox"> {{ checkedA }} </label>
            <br>
            
            <input type="checkbox" id = "checkB" v-model = "checkedB">
            <label for="checkbox"> {{ checkedB }} </label>
            <br>
            
            <input type="checkbox" id = "checkC" v-model = "checkedC">
            <label for="checkbox"> {{ checkedC }} </label>
            <br>
 
            <textarea v-model = "message" placeholder = "add multiple lines" rows = 5 cols = 30></textarea>
            <br>
            <span> Multiline message is : </span>
            <p style="white-space: pre-line"> {{ message }} </p>
        </div>
        
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    message : "",
                    checkedA : false,
                    checkedB : false,
                    checkedC : false,
                },
                
                watch:{
                    checkedA:function(){
                        if(this.checkedA == true)
                            console.log("A 체크");
                        else
                            console.log("A 체크해제");
                    },
                    checkedB:function(){
                        if(this.checkedC == true)
                            console.log("B 체크");
                        else
                            console.log("B 체크해제");
                    },
                    checkedC:function(){
                        if(this.checkedC == true)
                            console.log("C 체크");
                        else
                            console.log("C 체크해제");
                    }
                },
                
            })
        </script>
    </body>
</html>
cs


vue에서 체크박스를 이용하는 코드이다.


이때 label for를 이용하여 체크박스 상태를 확인 할 수 있다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
 
// radio 엘리먼트를 다루는 예제 (name를 이용하여 엘리먼트를 묶는다.)
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id = "app">
            <input type="radio" id="one" value="ONE" v-model="picked" name="radio">
            <label for="one">ONE</label>
            <br>
            <input type="radio" id="two" value="TWO" v-model="picked" name="radio">
            <label for="two">TWO</label>
            <br>
            <span>Picked: {{ picked }} </span>
        </div>
        
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    picked: "",
                },
                
            });
 
        </script>
    </body>
</html>
cs



radio 엘리먼트를 다루는 방법이다.


이때 v-model의 데이터로 서로다른 라디오를 묶을 수 있다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
// select 엘리먼트를 다루는 예
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id = "app">
            <select v-model ="selected">
                <option disabled value=""> Please select one </option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
 
            <span>Selected : {{ selected }}</span>
        </div>
        
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    selected: ""
                },
 
                watch:{
                    selected:function(){
                        if(this.selected == "A")
                            console.log("A 선택");
                        else if(this.selected == "B")
                            console.log("B 선택");
                        else if(this.selected == "C")
                            console.log("C 선택");
                    }
                }
            })
 
        </script>
    </body>
</html>
 
 
cs


select 엘리먼트를 다루는 예이다.


option을 이용하여 여러 항목을 만들 수 있고 클릭되는 값이 결국 v-model의 selected 데이터 부분에 들어가게 된다.






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
// checkbox toggle에서 v-bind 이용하여 true, false 상태 직접 설정하기
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id = "app">
            <input type="checkbox" v-model = "toggle" v-bind:true-value="a" v-bind:false-value="b">
            <span> {{ toggle }} </span>
        </div>
        
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    toggle : "체크해제",
                    a: "체크됨",
                    b: "체크해제",
                }
            })
 
        </script>
    </body>
</html>
cs


체크박스를 이용하여 체크 혹은 체크 해제를 만들 수 있다.


v-bind를 이용하여 true일때는 a 데이터 값이 나타나도록, false일때는 b 데이터 값이 나타나도록 한다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
// .lazy 엘리먼트 수식어를 통해 msg를 모두 입력한 후 업데이트 할 수 있도록 해준다.
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id = "app">
            <input type="text" v-model.lazy="msg" @keyup="changed">
 
        </div>
        
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    msg: ""
                },
                methods:{
                    changed: function(event){
                        console.log(this.msg);
                        console.log(event);
                    }
                }
            })
 
        </script>
    </body>
</html>
 
cs


.lazy 엘리먼트 수식어를 이용하면 msg 데이터부분에 값이 계속 들어가도 마지막 이벤트가 발생하기전까지 msg를 업데이트 하지 않는다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
 
// .number 수식어를 이용하여 숫자면 자동으로 숫자 타입으로 변환시켜준다.
 
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id = "app">
            <input type="text" v-model.number="msg" @keyup="changed">
 
        </div>
        
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    msg: ""
                },
                methods:{
                    changed: function(event){
                        console.log(typeof this.msg);
                    }
                }
            })
 
        </script>
    </body>
</html>
 
 
cs


.number 엘리먼트 수식어를 사용하면 숫자로 자동변환 시켜준다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
// trim을 통해 앞뒤 공백 제거 가능
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    </head>
    <body>
        <div id = "app">
            <input type="text" v-model.trim="msg" @keyup="changed">
 
            <p id="chat"> {{ msg }} </p>
        </div>
        
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    msg: ""
                },
                methods:{
                    changed: function(event){
                        console.log(this.msg);
                    }
                }
            })
 
        </script>
    </body>
</html>
 
cs


trim 엘리먼트 수식어를 사용하면 앞뒤 공백을 지울 수 있다.







반응형
저작자표시 비영리 변경금지

'Basic > VueJS' 카테고리의 다른 글

[VueJS] 사용자 이벤트  (0) 2018.08.09
[VueJS] 컴포넌트, Props, 상위 하위 컴포넌트  (0) 2018.08.07
[VueJS] Admin 페이지 예제 구현해보기  (0) 2018.08.03
[VueJS] 할일 리스트 구현  (4) 2018.08.02
[VueJS] Event bus를 이용한 컴포넌트 통신  (0) 2018.08.01

티스토리툴바