vue计算属性和监听器区别

最新推荐文章于 2024-05-13 10:40:45 发布
最新推荐文章于 2024-05-13 10:40:45 发布
阅读量3.1k 收藏 4
点赞数
分类专栏： Vue相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waillyer/article/details/108467671
版权

区别

  • 计算属性可以简化差值表达式写法
  • 计算属性变量定义在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;
            }
        },

效果

在这里插入图片描述

waillyer
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue计算属性和监听器实例解析
08-27
本文通过基本实例给大家介绍了vue计算属性和监听器的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue计算属性computed、事件、监听器watch的使用讲解
10-17
今天小编就为大家分享一篇关于vue计算属性computed、事件、监听器watch的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
vue 计算属性和监听器区别
Key_Val的博客
06-15 4636
vue计算属性和监听器的区别
计算属性和监听属性大汇总 ！！！
最新发布
macanhappy的博客
05-13 269
computedwatch和的主要区别在于它们的使用方式和特性。watch需要手动指定监听的数据，并可以获取变化前后的值，适用于明确知道需要监听哪个数据并基于其变化执行操作的场景。而则自动追踪函数内部使用的响应式数据，并在数据变化时执行回调函数，适用于执行副作用操作并依赖多个响应式数据的场景。计算属性和监听属性的区别触发方式：计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。而监听属性则是通过监听数据的变化来触发相应的操作。适用场景。
vue计算属性和监听器详解
weixin_45884508的博客
02-23 1051
计算属性通常由一个返回值的getter方法组成，它仅根据输入（依赖的响应式数据）产生输出，不涉及副作用操作。
vue 计算属性和监听属性
weixin_74844005的博客
10-26 101
计算属性是Vue中的⼀种特殊属性，⽤于对已有的数据进⾏计算和衍⽣，以⽣成新的数据。计算属性的值是根据依赖的数据动态计算得出的，当依赖的数据发⽣变化时，计算属性会⾃动重新计算。基础定义⽅式// 计算属性的名称// 计算属性的逻辑处理// 返回计算结果默认只有getter的计算属性// 创建 Vue 实例，得到 ViewModeldata: {},computed: { // 计算属性；特点：当计算属性中所以来的任何⼀个 data 属性改变之。
Vue计算属性与监听器
二哈喇子！
07-12 1165
计算属性配置项 computed、监听器配置项 watch
vue计算属性与侦听器的区别
Fairy_tutu的博客
12-20 1223
a. 当第一次使用计算属性的时候, vue会调用一次函数。c. 只有当计算属性内部的数据发生变化的时候，才会重新执行一次这个函数，然后又放入缓存。(1) 功能不同 : 计算属性是解决模板语法冗余,而侦听器是监听data中某一个数据的变化。b. 之后使用计算属性, vue不会调用这个函数，而是从缓存中直接读取。b. 计算属性函数一定要有返回值。(4) 计算属性可以新增一个属性，而侦听器一定要是data中的属性。(3) 计算属性不支持异步操作，侦听器支持异步操作。(2) 计算属性有缓存，侦听器没有缓存。
Vue中计算属性和侦听器的区别你都找到吗?
m0_62371650的博客
09-17 827
Vue中计算属性和侦听器的区别你都找到吗?
vue计算属性与监听器的区别
苦涩精灵的博客
10-20 793
vue计算属性与监听器的区别 计算属性（computed） 监听器（watch） 监听data中没有的值 监听data中有的值 使用时触发 使用不会触发 值有变化就触发 值有变化就触发 没有settter，要手动实现 可以获取 新的 和 旧的值 会缓存计算结果， 重新使用不会触发该方法 计算属性 eg: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l
vue计算属性与监听器
weixin_69761220的博客
07-27 264
计算属性，监听器
VUE之计算属性和监听器
cyy13579的博客
08-29 406
vue中对于数据的处理最常用的有计算属性以及监听器。计算属性和监听器都是vue实例的一个属性。本文就来聊一聊计算属性和监听器。
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
Vue计算属性与方法跟侦听器区别详解 Vue框架中，计算属性、方法和侦听器是三个常见的概念，但它们都有其特点和适用场景，下面我们将详细介绍它们的区别和使用场景。 一、计算属性（Computed Properties） 计算...
vue项目PC端屏幕分辨率与窗口大小自适应
热门推荐
waillyer的博客
08-26 1万+
一、npm安装依赖 项目基础配置使用 vue-cli 生成 自适应方案核心： 阿里可伸缩布局方案 lib-flexible px转rem：px2rem，它有webpack的loader px2rem npm i lib-flexible -S npm i px2rem-loader -D 二、在vue.config.js配置，这里我是按照1920*1080缩放 css: { loaderOptions: { postcss: { plugins: [
vue聊天功能模块
waillyer的博客
08-26 7996
需求：聊天模块，可以实现发送文字、表情、图片、文件 布局 分为三部分 左侧会话列表 中部聊天列表 右侧群组成员列表 先来看看效果 布局：左边固定大小，中间宽75%，可右展开 聊天布局：左消息，撤回消息，右消息，用text-align控制 布局 <!--聊天界面--> <div class="messagesBox-BigRight-down80"> &
vue聊天功能模块（九）艾特功能实现
waillyer的博客
11-06 5597
预览 艾特开始 思路：输入ctrl +@ ，弹出群成员列表弹框，点击成员时，把成员名称添加到输入框，同时隐藏弹框 1.点击弹框外任意位置，把弹框关闭即可 2.点击删除键时，把@和名称删掉 3.要实现艾特提示，输入框显示的是“@某某某”，实际发出去的消息，把@某某某转换为我们限定的某字符串，然后收到消息通过字符串匹配即可 下面，我们来一步步实现这功能吧 ...
vue中vuex的使用以及mapActions、mapMutations使用
waillyer的博客
09-27 5489
mapActions mapActions 必须放在 methods中，因为 action 或者 mutation 都是方法. 文件中导入 import { mapActions } from 'vuex'; export default { // ... methods: { //下述中的 ... 是拓展运算符 // 使用 [] 是解构赋值 ...mapActions([ 'increment', // 将 `this.increment
vue组件和js实现鼠标悬停显示title效果
waillyer的博客
10-13 5062
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JS控制TITLE悬停效果</title> <sc
vue中计算属性和监听器的区别
07-14
在Vue中，计算属性和监听器都是响应数据变化的方式，但是它们的用法和作用略有不同。 计算属性是基于响应式数据计算而来的属性，当计算属性所依赖的数据发生变化时，计算属性会自动重新计算。计算属性的特点是可以缓存结果，只有在计算属性所依赖的数据发生变化时才会重新计算。计算属性通常用于需要依赖多个数据计算得出的值，或者需要对数据进行处理后返回一个新的值的情况。 ```html <template> <div> <p>{{ fullName }}</p> </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName() { return `${this.firstName} ${this.lastName}` } } } </script> ``` 在上面的示例中，`fullName`是一个计算属性，它依赖于`firstName`和`lastName`两个响应式数据，当`firstName`或`lastName`发生变化时，`fullName`会自动重新计算。 监听器是用于监听某个数据的变化，当该数据发生变化时，监听器会执行指定的回调函数。监听器的特点是不能缓存结果，每次数据变化时都会执行回调函数。监听器通常用于需要在数据变化时执行一些异步操作的情况。 ```html <template> <div> <p>Name: {{ name }}</p> </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { name() { return `${this.firstName} ${this.lastName}` } }, watch: { name(newName, oldName) { console.log(`Name changed from ${oldName} to ${newName}`) } } } </script> ``` 在上面的示例中，`name`是一个计算属性，它依赖于`firstName`和`lastName`两个响应式数据，当`firstName`或`lastName`发生变化时，`name`会自动重新计算。同时，我们定义了一个监听器来监听`name`的变化，当`name`发生变化时，回调函数会被执行。注意，监听器的回调函数接受两个参数，分别是新值和旧值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值