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