Verwendung von berechnetem (berechnetem Eigentum)

Berechnungseigenschaften werden ausgelöst, wenn sich der Wert der abhängigen Eigenschaft ändert. Wenn sich der abhängige Wert nicht ändert, wird der Eigenschaftswert im Cache verwendet.

1. Funktioneller Ansatz

<template>
    <div>
      {
    
    {
    
    m}}
      <button @click="add">加一</button>
    </div>
</template>
<script setup lang="ts">
import {
    
    reactive,computed,ref} from 'vue'
let price=ref(0);
let m=computed<string>(()=>{
    
    
    return '总金额:'+price.value;
})
price.value=500
function add(){
    
    
    price.value++;
}

Das Ergebnis der Seitenausgabe lautet „Gesamtbetrag: 500“. Klicken Sie auf die Schaltfläche, um automatisch einen hinzuzufügen, und zeigen Sie ihn in der Ansicht an.

2. Funktioneller Ansatz

<template>
    <div>{
    
    {
    
     mul }}</div>
    <div @click="mul = 100">click</div>
 </template>
 <script setup lang="ts">
 import {
    
     computed, ref } from 'vue'
 let price = ref<number | string>(1)//$0
 let mul = computed({
    
    
    get: () => {
    
    
       return price.value
    },
    set: (value) => {
    
    
       price.value = 'set' + value
    }
 })
 </script>
 <style>
 </style>

Ergebnis anzeigen: 1 und klicken Sie, nach dem Klicken wird 1 zu set100

Warenkorb-Instanz

<template>
<div>
    <table style="width:800px" border>
        <thead>
            <tr>
                <th>名称</th>
                <th>数量</th>
                <th>价格</th>
                <th>单项总价</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr :key="index" v-for="(item,index) in data">
                <td align="center">{
    
    {
    
    item.name}}</td>
                <td align="center">
                    <button @click="AddanSub(item,false)">-</button>
                    {
    
    {
    
    item.num}}
                    <button @click="AddanSub(item,true)">+</button>
                </td>
                <td align="center">{
    
    {
    
     item.price }}</td>
                <td align="center">{
    
    {
    
     item.num * item.price }}</td>
                <td align="center">
                  <button @click="del(index)">删除</button>
               </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td align="center">总价:{
    
    {
    
     $total }}</td>
            </tr>
         </tfoot>
    </table>
</div>
 </template>
  
 <script setup lang="ts">
 import {
    
     computed, ref,reactive } from 'vue'
 
type Shop = {
    
    
   name: string,
   num: number,
   price: number
}
let $total = ref<number>(0)
const data = reactive<Shop[]>([
   {
    
    
      name: "袜子",
      num: 1,
      price: 100
   },
   {
    
    
      name: "裤子",
      num: 1,
      price: 200
   },
   {
    
    
      name: "衣服",
      num: 1,
      price: 300
   },
   {
    
    
      name: "毛巾",
      num: 1,
      price: 400
   }
])

const AddanSub = (item: Shop, type: boolean = false): void => {
    
    
   if (item.num > 1 && !type) {
    
    
      item.num--
   }
   if (item.num <= 99 && type) {
    
    
      item.num++
   }
}
const del = (index: number) => {
    
    
   data.splice(index, 1)
}
$total = computed<number>(() => {
    
    
   return data.reduce((prev, next) => {
    
    
    console.log(prev,next)
      return prev + (next.num * next.price)
   }, 0)
})

 </script>
  
 <style>
 </style>