반응형
<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

+ Recent posts