当前位置: 首页 > news >正文

vue2的计算属性

在 Vue 2 中,计算属性 (computed properties) 是基于其他数据属性计算得出的属性。计算属性本身是只读的,不能直接修改其值。如果你需要修改计算属性的值,通常需要修改其依赖的数据属性。

假设你有一个计算属性 fullName,它依赖于 firstNamelastName

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

如果你想修改 fullName,你需要修改 firstNamelastName

// 修改 firstName 和 lastName
this.firstName = 'Jane';
this.lastName = 'Smith';

如果你希望直接修改计算属性,可以使用计算属性的 gettersetter。例如:

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function() {
        return this.firstName + ' ' + this.lastName;
      },
      set: function(newValue) {
        var names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
});
this.fullName = 'Jane Smith';

这样,firstName 会变成 JanelastName 会变成 Smith

注意: 在计算属性set当中不可以直接修改。例如this.fullName = newValue。

computed: {
    fullName: {
      get: function() {
        return this.firstName + ' ' + this.lastName;
      },
      set: function(newValue) {
        this.fullName = newValue;
      }
    }
  }

注意:不能进行异步计算

相关文章:

  • 什么是业务流程分类框架
  • 水利水电安全员主要做什么?其任职资格有哪些?
  • 如何使用springboot项目如何实现小程序里面商品的浏览记录功能案例
  • Spring--BeanDefinition的用法
  • C++ Boost面试题大全及参考答案
  • VSCode 中设置 Git 忽略仅因时间戳修改导致的文件变更【使用deepseek生成的一篇文章】
  • 【网络编程】基于 TCP协议 的服务器-客户端通信模型的加密传输、多线程并发服务器
  • Qt--源码
  • Xen Center虚拟机Centos 7.x磁盘扩容
  • Java 中的 CopyOnWriteArrayList 是什么?
  • 工作-绩效笔记
  • Java+SpringBoot+Vue+数据可视化的综合健身管理平台(程序+论文+讲解+安装+调试+售后)
  • Vue 3 30天精进之旅:Day 30 - Vue生态系统的未来探索
  • C++数据切片问题,Plus多态
  • C++ STL中的reverse/unique/sort/lower_bound/upper_bound函数使用
  • Spring DI
  • React组件化开发详解
  • 责任链模式原理详解和源码实例以及Spring AOP拦截器链的执行源码如何使用责任链模式?
  • 【Javascript Day20】
  • MariaDB10创建用户并授权
  • 华为鸿蒙电脑正式亮相,应用生态系统能否挑战Windows?
  • 习近平离京赴莫斯科对俄罗斯进行国事访问并出席纪念苏联伟大卫国战争胜利80周年庆典
  • 金融监管总局将出八大增量政策,李云泽详解稳楼市稳股市“组合拳”
  • 重磅金融政策密集发布!一文梳理这场国新办发布会
  • 鸿蒙概念股强势上涨,鸿蒙电脑本月正式发布,生态链即将补全
  • 日本来信|劳动者的书信④