L'utilisation de la propriété calculée (propriété calculée)

Les propriétés de calcul sont déclenchées lorsque la valeur de la propriété dépendante change. Si la valeur dépendante ne change pas, la valeur de la propriété dans le cache est utilisée.

1. Approche fonctionnelle

<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++;
}

Le résultat de sortie de la page est "montant total : 500", cliquez sur le bouton pour en ajouter un automatiquement et affichez-le sur la vue.

2. Approche fonctionnelle

<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>

Afficher le résultat : 1 et cliquer, après avoir cliqué, 1 devient set100

exemple de panier

<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>