Vue3第二章（computed的使用）

computed（）方法可以传一个函数return,也可以传一个对象，实现这个对象的get和set方法

入门案例

<template>
  <div>
   <input type="text" v-model="firstNmae">
   <input type="text" v-model="lastNmae">
   <div>
    {{name}}
   </div>
  </div>
</template>

<script setup lang="ts">
import {ref,computed} from 'vue'

let firstNmae = ref('')
let lastNmae = ref('')


// computed写法1
// let name = computed(()=>{
//   return firstNmae.value + '----' + lastNmae.value
// })

// computed写法2
let name = computed({
  get(){
    return firstNmae.value + '----' + lastNmae.value
  },
  set(){
    firstNmae.value + '----' + lastNmae.value
  }
})
</script>

购物车案例

<template>
  <div>
    <table border style="width:500px">
      <thead>
        <tr>
          <th>名称</th>
          <th>数量</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="index" v-for="(item,index) in data">
          <td>{{item.name}}</td>
          <td><button @click="addAndSub(item,false)">-</button>{{item.num}}<button @click="addAndSub(item,true)">+</button></td>
          <td>{{item.price * item.num}}</td>
          <td><button @click="del(index)">删除</button></td>
        </tr>
      </tbody>
      <tfoot>
        <td></td>
        <td></td>
        <td></td>
        <td>总计:{{$total}}</td>
      </tfoot>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
let $total = ref(0)
type Shop = {
  name: string,
  num: number,
  price: number
}
const data = reactive<Shop[]>([
  {
    name: '满神的裤子',
    num: 1,
    price: 100
  },
  {
    name: '满神的鞋子',
    num: 1,
    price: 200
  },
  {
    name: '满神的丝袜',
    num: 1,
    price: 300
  }
])

const addAndSub = (item:Shop,type:boolean) => {
  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)=>{
    return prev + (next.num + next.price)
  },0)
})
</script>