computed主要是针对多对一,也就是多个值的变化会影响一个值的变化,常用于购物车列表
<template>
<div>
<p>商品价格:<input type="text" v-model="price"/></p>
<br>
<p>商品数量:<input type="text" v-model="num"/></p>
<br>
<p>商品总价:{{sum}}</p>
</div>
</template>
<script setup>
import { ref,computed } from 'vue'
const price = ref(0)
const num = ref(0)
const sum = computed(()=>{
return price.value * num.value
})
</script>
注:本人前端小白 ,如有不对的地方还请多多指教