vue3:computed

扫码或者点击文字后台提问
在这里插入图片描述

computed 支持选项式写法和函数式写法
1.选项式写法支持一个对象传入get函数以及set函数自定义操作
2.函数式写法只能支持一个getter函数不允许修改值的

基础示例

<template><div><div>姓：<input type="text" v-model="firstName"></div><div>名：<input type="text" v-model="lastName"></div><div>全名：{{ name }}</div><div><button @click="changeName">修改</button></div></div>
</template>
<script setup lang='ts'>
import { ref, computed } from 'vue';
/*** computed 支持选项式写法 和 函数式写法* 1.选项式写法 支持一个对象传入get函数以及set函数自定义操作* 2.函数式写法 只能支持一个getter函数不允许修改值的*/
let firstName=ref('张');
let lastName=ref('三');// //1.选项式写法 支持一个对象传入get函数以及set函数自定义操作
// let name=computed<string>({
//   get () {
//     // 读取值操作
//     return firstName.value + '-' + lastName.value
//   },
//   set (newVal) {
//     // 设置值操作
//     [firstName.value,lastName.value] = newVal.split('-')//   }
// });
// const changeName = () => {
//   name.value = '小-田'
// }//2.函数式写法 只能支持一个getter函数不允许修改值的
let name = computed(() => firstName.value + '-' + lastName.value)
</script>
<style scoped></style>

实战示例

<template><div><input v-model="keyWord" type="text" placeholder="搜索"></div><div style="margin-top: 20px;"><table border width="600" cellpadding="0" cellspacing="0"><thead><tr><th>物品名称</th><th>物品单价</th><th>物品数量</th><th>物品总价</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in searchData"><td align="center">{{ item.name }}</td><td align="center">{{ item.price }}</td><td align="center"><button @click="item.num>1?item.num-- : null">-</button>{{ item.num }}<button @click="item.num<99?item.num++ : null">+</button></td><td align="center">{{ item.num * item.price }}</td><td><button @click="del(index)">删除</button></td></tr></tbody><tfoot><tr><td colspan="5" align="right">总价：{{total}}</td></tr></tfoot></table></div>
</template>
<script setup lang='ts'>
import { ref, reactive, computed } from 'vue';
let keyWord=ref<string>("");
// 接口：定义数据类型
interface Data {name:string,price:number,num:number,
}
// 声明 Data 类型的数据
let data = reactive<Data[]>([{name:"小田的大瓜",price:500,num:1},{name:"小田的红衣服",price:10,num:1},{name:"小田的黑袜子",price:1000,num:1}
])
// 计算总价
const total = computed(() => {return data.reduce((prev:number,next:Data) => {return prev + next.num * next.price}, 0)
})
// 搜索功能
const searchData = computed(() => {return data.filter((item:Data) => {return item.name.includes(keyWord.value);})
})
const del = (index:number) => {data.splice(index,1)
}
</script>
<style scoped></style>