반응형
<template>
<div>
<div>
<h2>5년뒤 :: {{ add(5) }}</h2>
<h2>10년뒤 :: {{ add(10) }}</h2>
<h2>15년뒤 :: {{ add(15) }}</h2>
<h2>20년뒤 :: {{ add(20) }}</h2>
<h2>동갑의 10명이 있다면 나이의 총 합은 {{ multiply(age, 20) }}</h2>
<h2>{{ getTotalScore(1100000000000000000000, 1000) }}</h2>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
age: 30,
};
},
methods: {
add(num) {
console.log(this);
return this.age + num;
},
multiply(num1, num2 = 11) {
return num1 * num2;
},
getTotalScore(num1) {
return this.multiply(num1, num1);
},
// 화살표함수 쓰면 this를 통해 data 내부 변수 선택할 수 없음
// add: (num) => {
// console.log(this);
// return this.age + num;
// },
},
};
</script>
<style></style>
반응형
'Web > Vue' 카테고리의 다른 글
[Vue] 폼 핸들링 (0) | 2022.06.24 |
---|---|
[Vue] 이벤트 (0) | 2022.06.24 |
[Vue] 조건부 리스트 렌더링 (0) | 2022.06.24 |
[Vue] 리스트 렌더링 (0) | 2022.06.23 |
[Vue] 조건부 렌더링 (0) | 2022.06.23 |