-
데이터 바인딩 및 ComputedVUE.JS 2020. 5. 3. 23:37
컴퓨티드(computed) 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주고, 간단한 데이터 조작이 가능합니다.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="app"><!--p태그의 id 속성에 uuid를 적용 클래스 속성에는 name을 적용--><p v-bind:id ="uuid" v-bind:class="name"> {{ num }}</p><!-- computed 속성 doubleNum return 결과--><p>{{ doubleNum }}</p><div v-if="loading">loading</div><div v-else>already Login</div><!--v-model을 이용해서 input 되는 내용을 즉시 화면에 뿌림. --><input type="text" v-model="message"><p>{{message}}</p></div><script>new Vue({el : '#app',data() {return {num : 10,uuid: 'abc1234',name: 'text-blue',loading: true,message: ''}},// computed 속성을 사용해서 데이터 조작computed : {doubleNum : function() {}}});</script></body></html>http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter위 예제에서 doubleNum을 {{}} 콧수염 괄호를 이용하면 num 변수의 *2 값을 화면에 보여줄 수있다.
그러나 데이터 원본인 num까지 *2가 되는 것은 아니다.
위 데이터바인딩 v-bind는 개발자 도구 DOM을 보면 위와같이 표시됨을 볼 수 있다.
p태그의 id 속성에 uuid를 적용이되고, 클래스 속성에는 name이 적용되었다.
여기서 v- 접두사를 사용하는 것을 알수 있는데, 이를 디렉티브라고 한다.
'VUE.JS' 카테고리의 다른 글
Vue 프로젝트 생성하기(vue-cli 이용) (0) 2020.05.10 watch 속성 관련 정리 (0) 2020.05.05 axios(ajax) 관련 예제 (0) 2020.05.03 Router 관련 정리 (0) 2020.05.03 emit & props를 이용한 같은 레벨의 component 데이터 통신 (0) 2020.04.30