반응형
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
// 띄어쓰기 파악하며 대문자 치환
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "app">
            <span> {{ str | change }} </span>
            <br>
            <input type="text" name = "str" v-model ="str">
        </div>
 
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    str : 'Write anything'
                },
                filters:{
                    'change': function(myText){
                        if(myText.length == 0)
                            return " ";
                        else{
                            var ret = myText[0].toUpperCase();
                            for(i = 1 ; i < myText.length; i ++){
                                if(myText[i - 1] == ' ' && !('0' <= myText[i] && myText[i] <= '9')){
                                    ret += myText[i].toUpperCase();
                                }
                                else{
                                    ret += myText[i];
                                }
                            }
                            return ret;
                        }
                    }
                }
            });            
        </script>
    </body>
</html>
 
 
cs


change에 필터가 적용되어있다.


input에 의해 입력받은 값을 change가 myText 인자로 받아 공백을 기준으로 각 단어마다 첫번째를 대문자로 치환해주고 있다.




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
// 대소문자 반복
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "app">
            <span> {{ str | change }} </span>
            <br>
            <input type="text" name = "str" v-model ="str">
        </div>
 
        <script>
            var vm = new Vue({
                el : '#app',
                data:{
                    str : 'Write anything'
                },
                filters:{
                    'change':function(myText){
                        var ret = "";
                        for(i = 0; i < myText.length; i++)
                            ret += (i % 2 ? myText[i].toLowerCase() : myText[i].toUpperCase());
 
                        return ret;
                    }
                }
            });            
        </script>
    </body>
</html>
cs


필터를 이용하게 되는데 myText에는 input 입력 폼에서 들어온 값이 적용되고


홀수일때는 대문자, 짝수일때는 소문자로 강제 치환해준다.





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
// json형태로 변환
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://raw.githubusercontent.com/openexchangerates/accounting.js/master/accounting.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{ list | json }}
        </div>
 
        <script>
              var vm = new Vue({
                  el : '#app',
                  data:{
                      list :[{
                          name : "crocus",
                          age : 27
                      }]
                  },
                  filters:{
                      'json':function(list){
                          return JSON.stringify(list);
                      }
                  }
              })
        </script>
    </body>
</html>
cs


JSON.stringify는 잘 알아두자. JSON 파일로 변환할 때 변수, 배열 모두 string으로 치환해준다.








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

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

[VueJS] v-if 디렉티브 및 v-show 디렉티브  (0) 2018.07.20
[VueJS] v-for 디렉티브 및 정렬 방법  (0) 2018.07.18
[VueJS] 머스태시 문법 및 필터 적용  (0) 2018.07.14
[VueJS] 버스를 이용한 두 컴포넌트 통신  (0) 2018.07.12
[VueJS] 데이터 바인딩 및 폼 입력 바인딩  (2) 2018.07.10

티스토리툴바