vue计算属性和监听器区别
本文共 8460 字，大约阅读时间需要 28 分钟。
区别
- 计算属性可以简化差值表达式写法
- 计算属性变量定义在computed中，可以直接使用在｛｝中的，跟methods中函数类似，只不过有利于缓存，性能更好
- 计算属性可以防止监听属性的滥用，但一些异步请求，计算属性做不到，还得watch来完成。
例如：解决element-ui分页中删除页面最后一条数据时，currentPage没有减一，页面列表为空问题时，就可以用到监听属性
监听页面的总条数，并对总条数进行判断。从而刷新列表
<el-pagination layout="prev, pager, next" @current-change="changePageNum" :current-page="currentPage" :page-size="pageSize" :total="total"></el-pagination>watch:{ total(){ if(this.total==(this.currentPage-1)*this.pageSize&& this.total!=0){ this.currentPage-=1; getDiscountList(this);//获取列表数据 } } }要使用分页，返回部分数据时，可以使用计算属性
computed: { limitData() { let data = [...this.table1Datas]; return data; }, // 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data dataWithPage() { const data = this.limitData; const start = this.current * this.size - this.size; const end = start + this.size; return [...data].slice(start, end); }, //替换数据中的回车符 content: function(msg) { return msg.replace('\n', '<br>'); }, },计算属性和监听属性结合起来用
结合使用效果更佳
- 需求：根据公积金比率和员工工资，计算公积金数
<Form ref="form" :model="data" :rules="rules" label-position="top" class="ivu-mt"><Card :bordered="false" dis-hover title="五险一金信息"> <Row :gutter="24"> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="养老金基数："> <Input :readonly="true" v-model="data.pensionBase" placeholder="自动计算"/> </FormItem> </Col> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="养老金比率：" prop="pensionPer" label-for="pensionPer"> <Input :readonly="true" v-model="data.pensionPer" placeholder="请输入" element-id="pensionPer"/> </FormItem> </Col> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="医疗基数："> <Input :readonly="true" v-model="data.medicalBase" placeholder="自动计算"/> </FormItem> </Col> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="医疗保险比率：" prop="medicalPer" label-for="medicalPer"> <Input :readonly="true" v-model="data.medicalPer" placeholder="请输入" element-id="medicalPer"/> </FormItem> </Col> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="失业保险基数："> <Input :readonly="true" v-model="data.unempBase" placeholder="自动计算"/> </FormItem> </Col> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="失业保险比率："> <Input :readonly="true" v-model="data.unempPer"/> </FormItem> </Col> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="工伤保险基数："> <Input :readonly="true" v-model="data.injuryBase"/> </FormItem> </Col> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="工伤保险比率："> <Input :readonly="true" v-model="data.injuryPer"/> </FormItem> </Col> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="生育保险基数："> <Input :readonly="true" v-model="data.bithinsuranceBase"/> </FormItem> </Col> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="生育保险比率："> <Input :readonly="true" v-model="data.bithinsurancePer" placeholder="请输入"/> </FormItem> </Col> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="公积金基数："> <Input v-model="data.accumulationFundBase" placeholder="不填则自动计算" /> </FormItem> </Col> <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> <FormItem label="公积金比率："> <Input v-model="data.accumulationFundPer" placeholder="不填则自动计算" /> </FormItem> </Col> </Row></Card></Form> 通过监听属性监听数据的变化，结合计算属性，计算出相应值，然后返回即可
data() { return { data: { nickName:'', deptName: '', account: '', basicSalary: '', bonus: '0', lunchSalary: '0', leaveDel: '0', overworkAdd: '0', attendanceDel: '0', allSalary: '0', shouldSalary: '', createDate: '', //五险一金 pensionBase: '',//养老金基数 pensionPer: '0.08',//养老金比率 medicalBase: '',//医疗基数 medicalPer: '0.08',//医疗保险比率 unempBase: '',//失业保险基数 unempPer: '0.01',//失业保险比率 injuryBase: '0',//工伤保险基数 injuryPer: '0',//工伤保险比率 bithinsuranceBase: '0',//生育保险基数 bithinsurancePer: '0',//生育保险比率 accumulationFundBase: '',//公积金基数 accumulationFundPer: '',//公积金比率 }, } }, computed: { labelWidth() { return this.isMobile ? undefined : 140; }, labelPosition() { return this.isMobile ? 'top' : 'left'; }, //计算养老金基数 newPensionBase() { return this.data.pensionPer * this.data.basicSalary; }, //计算医疗基数 newmedicalBase() { return this.data.medicalPer * this.data.basicSalary; }, //计算失业保险基数 newunempBase() { return this.data.unempPer * this.data.basicSalary; }, //计算公积金比率 newaccumulationFundPer() { let basicSalary = this.data.basicSalary if (basicSalary != null) { switch (true) { /*1、工资范围在1-5000元之间的，包括百5000元，适用个人所得税税率为0%。 速算扣除数（元）0*/ case basicSalary < 5000: this.data.accumulationFundPer = 0; return this.data.basicSalary * this.data.accumulationFundPer; break; /*2、工资范围在5000-8000元之间的，包括度8000元，适用个人所得税税率为3%。 速算扣除数（元）105*/ case basicSalary >= 5000 && basicSalary <80000: this.data.accumulationFundPer = 0.03; return this.data.basicSalary * this.data.accumulationFundPer; break; /*3、工资范围在8000-17000元之间的，包括17000元，适用个人所得税税率为10%。速算扣除数（元）555*/ case basicSalary >8000 && basicSalary <= 17000: this.data.accumulationFundPer = 0.1; return this.data.basicSalary * this.data.accumulationFundPer; break; /*4、工资范围在17000-30000元之间的，包括30000元，适用个人所得税税率为20%。速算扣除数（元）1005*/ case basicSalary > 17000 && basicSalary <= 30000: this.data.accumulationFundPer = 0.2; return this.data.basicSalary * this.data.accumulationFundPer; break; /*5、工资范围在30000-40000元之间的，包括40000元，适用个人所得税税率为25%。速算扣除数（元）2755*/ case basicSalary >30000 && basicSalary <= 40000: this.data.accumulationFundPer = 0.25; return this.data.basicSalary * this.data.accumulationFundPer; break; /*6、工资范围在40000-60000元之间的，包括60000元，适用个人所得税税率为30%。速算扣除数（元）5505*/ case basicSalary >40000 && basicSalary <= 60000: this.data.accumulationFundPer = 0.3; return this.data.basicSalary * this.data.accumulationFundPer; break; /*7、工资范围超过60000的,适用个人所得税税率为45%。速算扣除数（元）13505*/ case basicSalary >60000: this.data.accumulationFundPer = 0.45; return this.data.basicSalary * this.data.accumulationFundPer; break; default: break; } } } }, watch: { //养老金基数 newPensionBase(val) { this.data.pensionBase = val; }, //医疗基数 newmedicalBase(val) { this.data.medicalBase = val; }, //失业保险基数 newunempBase(val) { this.data.unempBase = val; }, //公积金基数 newaccumulationFundPer(val) { this.data.accumulationFundBase = val; } },效果
转载地址：http://zlcg.baihongyu.com/
你可能感兴趣的文章
基于单片机简易信号误差分析设计-全套资料
查看>>
基于单片机简易洗衣机系统仿真设计-全套资料
查看>>
基于单片机简易脉搏测量仪系统设计-毕设课设资料
查看>>
基于单片机八层电梯系统控制设计-毕设课设资料
查看>>
并发框架下的“基础类型”——浅析基本类型、ThreadLocal、原子类的线程安全机制
查看>>
Android Studio同步Gradle失败的解决办法
查看>>
VHDL代码风格
查看>>
C++系列7：回调函数
查看>>
图像处理系列1.skimage
查看>>
好用的拼图小程序，图作妖
查看>>
读取二进制存储信息，将低位二进制存储转换为高位存储
查看>>
Hibernate操作Blob，将Blob转换为String
查看>>
Object Clone
查看>>
Javascript中String支持使用正则表达式的四种方法
查看>>
2021年判断浏览器最新写法，你都掌握了吗？
查看>>
简易版Http请求工具
查看>>
【法律】如何保障企业的合法权益：保密协议模板
查看>>
【IoT】 产品设计之结构设计：材料工艺选择及特点（PP、PVC、PE、PS、ABS、PC）
查看>>
【IoT】 产品设计之结构设计：PMMA（亚克力）板、PC耐力板、PS有机板与MS板区别
查看>>
【IoT】蓝牙BLE基础：CC254x通信系列之模拟SPI协议
查看>>