[공부] 프로그래밍/Vue.js
computed
woodisco
2023. 10. 16. 17:03
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>