computed

 

computed

 

• v-model 디렉티브를 사용하여 JavaScript 변수 price1, price2, price3와 양방향 데이터 바인딩된다.
• 두 개의 <span> 요소는 합계(calc1)와 합계의 10%(calc2)를 표시한다. 

• <script setup> 블록은 Vue.js 3의 Composition API를 사용하여 데이터와 로직을 정의하는 곳이다.
• import { ref, computed } from 'vue' : Vue 3의 ref와 computed 함수를 가져와서 사용한다.
• const price1, const price2, const price3 : ref 함수를 사용하여 price1, price2, price3 변수를 정의하고 초기값으로 각각 1000을 설정한다. 이 변수들은 각각의 입력 필드와 양방향 데이터 바인딩된다.
• const calc1와 const calc2 : computed 함수를 사용하여 calc1 및 calc2 변수를 정의한다. 이러한 변수는 계산된 값을 나타낸다. calc1은 price1, price2, price3 변수들의 합계를 반환하고, calc2는 합계에 10%를 곱한 값을 반환한다.

 

// HTML
<template>
	
  <input type="number" v-model="price1" />
  <br>
  <input type="number" v-model="price2" />
  <br>
  <input type="number" v-model="price3" />
  <br>

  <span>合計：{{ calc1 }}</span>
  <br>
  <span>合計に対する10%：{{ calc2 }}</span>
  
</template>

// Javascript
<script setup>
  import { ref, computed } from 'vue'
	
  const price1 = ref(1000);
  const price2 = ref(1000);
  const price3 = ref(1000);

  const calc1 = computed(() => {
    return (price1.value + price2.value + price3.value);
  })

  const calc2 = computed(() => {
    return (price1.value + price2.value + price3.value) * 0.1;
  })
  
</script>

---