vue计算属性和监听器区别
程序员文章站
2024-02-15 13:23:04
...
区别
- 计算属性可以简化差值表达式写法
- 计算属性变量定义在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;
}
},
效果
上一篇： 自我激励 心情
下一篇： 1 SpringMVC详解（第一部分）