마카로닉스

1772 No

Vue.js 입력문자 감지 watch

2021-11-09 02:11:35 By 라이트 0 486 댓글수 4 포스트 하기

11월 2025
일	월	화	수	목	금	토
						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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>    
</head>
<body>
    <h2>Vue </h2>
   

    <div id="app">
        <p>금지문자는 {{forbiddenText}}</p>
        <textarea v-model="inputText"></textarea>

    </div>



    <script>
         new Vue({
            el:"#app",
            data:{
                forbiddenText:'씨댕',
                inputText:''
            },
            watch :{
                inputText(){
                    const pos =this.inputText.indexOf(this.forbiddenText);
                    if(pos >-1){
                        alert(this.forbiddenText + " 는 입력할 수 없습니다.");
                        this.inputText =this.inputText.substr(0,pos);
                    }
                }
            }
         });      
    </script>

  
</body>
</html>

jquery