728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
data1 : 'aaaa',
data2 : 'bbbb'
},
computed : {
data3 : {
get : function(){
return this.data1 + ',' + this.data2
},
set : function(newValue){ //computed get 에서 가져오기 가능
var list = newValue.split(',') //쉼표 기준으로 배열 잘라내기
if(list.length >= 2){
this.data1 = list[0]
this.data2 = list[1]
}
}
}
}
})
}
</script>
</head>
<body>
<div id = 'test1'>
<input type = 'text' v-model = 'data1'/><br/>
<input type = 'text' v-model = 'data2'/><br/>
<input type = 'text' v-model = 'data3'/><br/>
</div>
</body>
</html>자바에서 getter setter 지정하듯, 변수를 가져오고, set에서 뭔가 다른 처리를 할 수 있다
computed에서 get 을 통해 data1 과 data2에 기존 저장해둔 변수들을 가져오는 함수를 만들었다.
그러면 data1,data2 꼴로 세번째 인풋칸에서 출력이 가능하다
바로 이런 식으로
그리고 set함수에서 , 을 delimeter로 하여 값을 끊는 배열을 만들었다.
list의 0번지에는 첫번째칸 data1을, list의 1번지에는 두번째칸 data2를 저장할 수 있다.
그리고 data1을 바꿔도 data1과 data3이
data2를 바꿔도 data2와 data3이
data3을 바꿔도 바꾼 자리가 쉼표 앞인지 뒤인지에 따라 해당하는 배열 번지수에 맞는 데이터값이 변경될 수 있다
728x90
반응형
'study > Vue.js' 카테고리의 다른 글
| Vue.js CSS 클래스 바인딩 (0) | 2022.06.10 |
|---|---|
| Vue.js 링크 처리: v-bind / v-on 용도 추가 (0) | 2022.06.09 |
| Vue.js watch computed : 캐시 메모리저장 여부 / 코드 복잡도 차이 (0) | 2022.06.07 |
| Vue.js 컴포넌트 component, v-bind:is 동적할당, 템플릿만들기 (0) | 2022.06.06 |
| Vue.js HTML태그 인식하기 / 이미지 불러오기 : v-html, v-bind (0) | 2022.06.05 |
댓글