computed属性

计算属性就是当依赖的值发生变化的时候，才会触发它的更改，如果依赖的值不发生变化的时候，使用的是缓存中的值

简易的购物车

Tips：利用函数的形式来完成数值的变化

<template>

  <div>

    <div>简易购物车</div>

  </div>

  <table border="1" width="500px">

    <thead>

    <tr>

      <th>名称</th>

      <th>数量</th>

      <th>价格</th>

      <th>单件总价</th>

    </tr>

  </thead>

  <tbody>

    <tr v-for="(item,index) in products"  :key="index" >

      <td align="center">{{ item.names }}</td>

      <td align="center"><button @click="change_count(item,false)">-</button>{{ item.count }}<button @click="change_count(item,true)">+</button></td>

      <td align="center">{{ item.price * item.count }}</td>

      <td align="center"><button @click="deletes(index)">删除</button></td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td align="center">总价：￥{{ $total }}</td>

    </tr>

  </tfoot>

  </table>

 

  <div>

    <button @click="change">测试</button>

  </div>

</template>

<script setup lang="ts">

import { reactive,ref} from 'vue';

type demo = {

  names:string,

  count:number,

  price:number

}

let $total = ref(0)

const products = reactive<demo[]>([{

  names:'衣服',

  count:1,

  price:288

},{

  names:'裤子',

  count:1,

  price:212

},{

  names:'鞋子',

  count:1,

  price:388

},])

// 数量加减函数

const change_count =(item:demo,type:boolean):void=>{

  if(item.count>1 && !type){

    item.count--

  }

  if(item.count<10 && type){

    item.count++

  }

totlal()

}

// 删除物品

const deletes = (index:number )=>{

  products.splice(index,1)

  totlal()

}

const change = ()=>{

  console.log(products);

}

// 计算商品总和

const totlal = ()=>{

  $total.value = products.reduce((pre,next) =>{

    return pre + next.count*next.price

  },0)

}

totlal()

</script>

<style scoped>

</style>

 

===============================================================================

Tips：利用computed属性来完成：

不用多次调用函数，一次性完成