728x90
반응형
◎ 이번에 배운 computed, watch를 이용한 예제
조건)
▷ 입력 금지 문자열을 ,(콤마) 기준으로 입력할 수 있다.
▷ 제한 시간을 넣고 시작 버튼을 누르면 텍스트를 넣을 수 있다.
▷ 제한 시간이 실시간으로 표시된다.
▷ 입력 중 금지 문자열이 나올 경우 경고를 띄우고 확인 버튼을 누르면 해당 문자열은 삭제되며 시간이
+10초 추가된다.
▷ 제한 시간이 완료되면 텍스트 입력창은 비활성화되고 입력 창 아래 입력한 문자의 개수가 표시되며
금지어를 사용한 횟수 * 12 한 벌점을 출력한다.
결과 화면)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>제한 시간내에 문자 입력하기</h2>
<div id="app">
<label>금지문자 (,로 나누어 복수입력가능) <input v-model="fbdText"></label><br><br>
<label>제한시간을 입력하세요 (초) <input v-model="restTime">
<button v-on:click="startFun">시작</button></label><br>
<p>남은 시간 {{ restTime }}초</p>
<textarea v-if="tf" v-model="inputText" :disabled="block"></textarea>
<p>{{ inputText.length }} 개의 문자를 입력하였습니다.</p>
<p>별점 : {{ star }} (금지문자 1개당 12점)</p>
</div>
<script>
new Vue({
el: '#app',
data: {
fbdText: [],
inputText: '',
fbdNum: 0,
tf: false,
restTime: 0,
a:null,
block: false,
},
methods:{
startFun: function(){
this.tf = true;
this.a = setInterval(() => {this.restTime--}, 1000);
}
},
watch:{
inputText: function(){
var newText = this.fbdText.split(',');
for(var i=0; i<newText.length; i++){
var a = this.inputText.indexOf(newText[i]);
if(a >= 0){
alert(newText[i] + '는 금지문자입니다.')
this.inputText = this.inputText.substr(0, a);
this.restTime += 10;
this.fbdNum++;
}
}
},
restTime: function(){
if(this.restTime <= 0){
clearInterval(this.a);
this.block = true;
}
}
},
computed:{
star: function(){
return this.fbdNum * 12;
}
}
})
</script>
</body>
</html>위의 조건들을 모두 만족하는 결과를 도출했습니다.
변수를 총 7개 만들었고 버튼과 관련된 method 1개, watch를 이용해 화면의 변화를 감지하는 함수를 2개, 값을 계산한는 함수를 1개 만들어 결과화면을 나타낼 수 있었습니다.
여기서 사용한 것들은 앞의 computed, wathc를 활용한 예제의 코드들과 대부분 유사합니다.
처음 이 예시를 봤을 때는 막막했었지만 하나씩 결과들을 도출하다보니 혼자서 문제를 해결할 수 있었습니다.
이렇듯 계속해서 예제를 반복하면서 앞의 내용들을 복습해 가야겠어요!!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js 애니메이션 효과 적용(transition) (0) | 2022.12.28 |
|---|---|
| [java script] Vue.js markdown 에디터 만들기 (0) | 2022.12.28 |
| [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 2) (0) | 2022.12.27 |
| [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 1) (2) | 2022.12.27 |
| [java script] Vue.js 데이터를 사용한 계산 2 (computed) (0) | 2022.12.27 |
