腾讯云win建设网站,敬请期待英语怎么说,网博士智能建站,手机网站设计公司哪家好文章目录1.计算属性1.get()和set()2.computed的简写3.computed和methods对比2.相关demo1.全选和反选2.todos列表1.计算属性
模板内的表达式非常便利#xff0c;但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以#xff0c;对于任何…
文章目录1.计算属性1.get()和set()2.computed的简写3.computed和methods对比2.相关demo1.全选和反选2.todos列表1.计算属性
模板内的表达式非常便利但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以对于任何包含响应式数据的复杂逻辑你都应该使用计算属性。
简单来说计算属性可以理解为:要用的属性不存在要通过已有属性计算得来.底层借助了Object.defineproperty方法提供的getter和setter。
1.get()和set()
计算属性默认有自己的get()和set().
get()属性有以下特点:
(1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。
set()属性的特点:
(1)当给计算属性设置值的时候会触发set()
(2)如果计算属性要被修改那必须写set函数去响应修改,set函数可以接收用户修改计算属性的值
templatedivh3computed计算属性/h3input typetext v-modelfirstName -input typetext v-modellastName input typetext v-modelfullName/div
/template
script setup
import {ref,reactive,computed} from vueconst firstNameref(马);const lastNameref(丽);
const fullNamecomputed({get(){console.log(get被调用了);return firstName.value-lastName.value},set(value){console.log(set被触发了);//根据fullname的值重新设置firstName和lastNameconst newArrvalue.split(-);firstName.valuenewArr[0];lastName.valuenewArr[1];}
})
/script2.computed的简写
在多数情况下我们只考虑读取不考虑修改可以把set部分删掉,直接改写成函数的形式.
计算属性最终会出现在实例上直接读取使用即可,不需要()调用
templatedivh3computed计算属性/h3input typetext v-modelfirstName -input typetext v-modellastName input typetext v-modelfullNamepinput typetext v-modelstr /ph3反转字符串:{{reverseStr}}/h3/div
/template
script setup
import {ref,reactive,computed} from vue//不考虑给fullname设置值
//此时如果给fullname赋值会报一个警告:Write operation failed: computed value is readonly
const fullNamecomputed(function(){return firstName.value-lastName.value
})//反转字符串
const strref(hello);
const reverseStrcomputed(() str.value.split().reverse().join())
/script3.computed和methods对比
与methods实现相比computed内部有缓存机制复用效率更高调试方便。
templatedivh3methods和computed对比/h3p使用方法获取当前年龄:{{getAge()}}/pp使用方法获取当前年龄:{{getAge()}}/pp使用方法获取当前年龄:{{getAge()}}/pp使用计算属性获取当前年龄:{{age}}/pp使用计算属性获取当前年龄:{{age}}/pp使用计算属性获取当前年龄:{{age}}/p/div
/template
script setup
import {ref,reactive,computed} from vue
const birref(2016/5/20);
//使用方法获取当前周岁
const getAge(){console.log(methods);return new Date().getFullYear()-new Date(bir.value).getFullYear()}//使用计算属性获取当前周岁
const agecomputed((){console.log(computed)
return new Date().getFullYear()-new Date(bir.value).getFullYear();
})
/script计算属性 computed总结:
(1)computed计算属性,是通过计算得出来的属性 是依赖data中的值,如果依赖的值变化,计算属性也会发生变化
(2)computed是有缓存的,只要数据不发生变化,直接从缓存中读取值即可,只有当值发生变化的时候才会重新计算
(3)computed 有get属性还有set属性.大部分情况是读取值,所以设置值很少用到,这时可以简写,只获取get的值即可(只读)
2.相关demo
1.全选和反选
templatedivtable border1 cellspacing0 cellpadding0trthinput typecheckbox v-modelisAllChecked / 全选/thth商品名称/thth商品价格/thth商品数量/th/trtr v-foritem in iceCream :keyitem.idtdinput typecheckbox v-modelitem.ischeck / /tdtd{{item.name}}/tdtd{{item.price}}/tdtd{{item.num}}/td/trtrtd总计:/tdtd colspan3{{total}}/td/tr/table/div
/template
script setup
import {ref,reactive,computed} from vue
//iceCreame的相关操作
const { iceCream } reactive({iceCream: [{id: 98,name: 哈根达斯,num: 10,price: 98,ischeck: false},{id: 56,name: 八喜,num: 1,price: 48,ischeck: true},{id: 102,name: 冰雪皇后,num: 1,price: 29,ischeck: false},{id: 106,name: 蒙牛,num: 10,price: 4,ischeck: true}]
})
//实现反选和全选
const isAllCheckedcomputed({get(){console.log(触发了get);return iceCream.every(elel.ischeck);},set(value){console.log(触发了set,value);iceCream.forEach(elel.ischeckvalue);}
})
//计算列表选中项的和
const totalcomputed((){return iceCream.reduce((cur,val){if(val.ischeck){return curval.num*val.price;}else{return cur;}},0)})/script2.todos列表
templatedivh3my todos list span :classactive v-ifcomplate!list.length {{list.length-complate}}/span /h3input typetext classtitle placeholder请输入新任务 v-model.trimtxt keydown.enteraddItem /table classtodostrth#/thth任务列表/thth筛选/thth状态/thth操作/th/trtr v-for(item,index) in filterList :keyitem.idtd{{index1}}/tdtd{{item.text}}/tdtdinput typecheckbox v-modelitem.done / /tdtd{{item.done?完成:未完成}}/tdtd a href# clickremoveItem(item)删除/a /td/tr/tablepinput typecheckbox v-modelallChecked / 显示全部 /pp 已完成 strong{{complate}}/strong /总数 strong{{list.length}}/strong /p/div
/template
script setup
import {ref,reactive,computed} from vueconst {list}reactive({
list:[{id:1,text:吃饭,done:true},{id:2,text:睡觉,done:false},{id:3,text:打豆豆,done:true}],})
const txtref();const nextIdref(4); const allCheckedref(false);//添加一项任务
const addItem(){//如果输入框为空,不做任何操作if(!txt.value) return;var obj{id:nextId.value,text:txt.value,done:false}list.push(obj);txt.value;nextId.value;}//删除一项数据:const removeItem(item){//根据当前点击这一项的id,查找在列表中的位置const indexlist.findIndex(elel.iditem.id);list.splice(index,1)}//统计完成的个数const complatecomputed(()list.filter(elel.done).length) //根据条件筛选列表const filterListcomputed((){console.log(allChecked.value)return list.filter(el!el.done||allChecked.value)})//计算添加的类名const active computed(()list.length-complate3?danger:waring)/script
