vue计算属性和监听器区别

区别

计算属性可以简化差值表达式写法
计算属性变量定义在computed中，可以直接使用在｛｝中的，跟methods中函数类似，只不过有利于缓存，性能更好
计算属性可以防止监听属性的滥用，但一些异步请求，计算属性做不到，还得watch来完成。

例如：解决element-ui分页中删除页面最后一条数据时，currentPage没有减一，页面列表为空问题时，就可以用到监听属性

监听页面的总条数，并对总条数进行判断。从而刷新列表

<el-paginationlayout="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 的 datadataWithPage() {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.basicSalaryif (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;}},

效果

vue计算属性和监听器区别相关推荐

vue 计算属性和监听器区别
上海疫情还没过去,裁员的噩耗又来了,,,快卷不动了!最近火急火燎的搞面试,趁复习面试题,总结一下.关于计算属性和监听器vue官方文档写的很简单,博客上也大相径庭.(我也只记的大概,哈哈)懒得查来查去所 ...
vue计算属性与监听器的区别
vue计算属性与监听器的区别计算属性(computed) 监听器(watch) 监听data中没有的值监听data中有的值使用时触发使用不会触发值有变化就触发值有变化就触发没有settt ...
[vue] watch和计算属性有什么区别？
[vue] watch和计算属性有什么区别? 一个是侦听属性,一个是计算属性 2.一个是为了应对复杂的逻辑计算,一个是对数据的变化作出反应 3.一个是只有当缓存改变时才执行,一个是只要从新渲染就会执行 ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
你知道，什么时候用Vue计算属性吗？
摘要:当我们处理复杂逻辑时,都应该使用计算属性. 本文分享自华为云社区<深入理解计算属性,知道什么时候该用Vue计算属性吗?>,作者: 前端老实人 . 计算属性有些时候,我们在模板中放入 ...
Vue计算属性、监视属性
一.Vue计算属性 1. 定义:要用的属性不存在,要通过已有属性计算得来 2. 原理:底层借助了Object.defineproperty方法提供的getter和setter 3. get函数什么时候 ...
Vue计算属性实现成绩单，Vue计算属性
Vue计算属性实现成绩单代码如下: <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
vue修改计算属性的值_八.Vue计算属性
Vue计算属性前言我们要做的是springboot和vue.js所做的前后端分离的hr项目,所以从来没接触到vue的小伙伴,可以这篇文章学Vue入门,这一篇就够了模板内的表达式非常便利,但是设 ...

vue计算属性和监听器区别

区别

例如：解决element-ui分页中删除页面最后一条数据时，currentPage没有减一，页面列表为空问题时，就可以用到监听属性

要使用分页，返回部分数据时，可以使用计算属性

计算属性和监听属性结合起来用

通过监听属性监听数据的变化，结合计算属性，计算出相应值，然后返回即可

效果

vue计算属性和监听器区别相关推荐

最新文章

热门文章