vue_计算属性getter和setter方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{fullName}} --- {{age}} 计算属性
  </div>
</body>
<script type="text/javascript">
  let vm = new Vue({
    el: ‘#app‘,
    data: {
      firstName: ‘Dell‘,
      lastName: ‘Less‘,
      age: 20
    },
    // 计算属性, 缓存机制
    computed: {
      //计算属性的getter和setter方法
      //数据渲染时会自动调用get方法
      fullName: {
        get: function () {
          return this.firstName +‘ ‘+ this.lastName
        },
        //数据变化时自动调用set方法
        //现在再运行 vm.fullName = ‘John Doe‘ 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
        set: function(value) {
          let arr = value.split(‘ ‘)
          // 当fullName相关联的数据发生变化时相当于重新调用get方法
          this.firstName = arr[0]
          this.lastName = arr[1]
        }
      }
    }
  })

</script>
</html>

原文地址:https://www.cnblogs.com/JunLan/p/12418699.html

时间: 2024-10-05 23:54:24

vue_计算属性getter和setter方法的相关文章

JavaScript中闭包实现的私有属性的getter()和setter()方法

注意: 以下的输出都在浏览器的控制台中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>闭包</title> </head> <body> <script type="text/javascript"> /** * 利用闭包实现 * 这个函数给对象o增加了属性存储器方法 * 方法名称为ge

Java网络编程从入门到精通(17):Socket类的getter和setter方法(1)

在Java类中,getter和setter方法占了很大的比重.由于Java中没有定义属性的关键字:因此,getter和setter方法用于获得和设置Java类的属性值:如getName和setName方法用于设置name属性的值.如果某个属性只有getter方法,那这个属性是只读的:如果只有setter方法,那么这个属性是只写的.在Socket类中也有很多这样的属性来获得和Socket相关的信息,以及对Socket对象的状态进行设置. 一.用于获得信息的getter方法 我们可以从Socket对

属性getter和setter

我们知道,对象属性是由名字.值和一组特性(attribute)构成的.在ECMAScript5 中,属性值可以用一个或两个方法替代,这两个方法就是getter和setter.由getter和setter定义的属性称做“存取器属性”(accessor property),它不同于“数据属性”(data property),数据属性只有一个简单的值. 程序查询存取器属性的值时,JavaScript调用getter方法(无参数).这个方法的返回值就是属性存取表达式的值.当程序设置一个存取器属性的值时,

Java网络编程从入门到精通(18):Socket类的getter和setter方法(2)

二.用于获得和设置Socket选项的getter和setter方法 Socket选择可以指定Socket类发送和接受数据的方式.在JDK1.4中共有8个Socket选择可以设置.这8个选项都定义在java.net.SocketOptions接口中.定义如下: public final static int TCP_NODELAY = 0x0001;    public final static int SO_REUSEADDR = 0x04;    public final static int

魏兆辉的IOS基础学习笔记之九 OC语言基础-04 getter和setter方法

存取方法分为两种:setter方法和getter方法.setter方法,是为对象中的变量赋值.getter方法,是通过对象本身访问对象属性. 在Objective-c中,Cocoa框架在定义存取方法的时候,有相关的规定: (1). setter方法,根据它的所要去改变的属性名称来命名,并在前面加set前缀.如:setEngine,setTire等. (2). getter方法,则是以其返回的属性名称来命名,不要将get前缀加到getter方法名前面.因为在Cocoa中,get前缀有其他的用途.一

《JS权威指南学习总结--6.6属性getter和setter》

内容要点: 一.对象属性 对象属性是由名字.值和一组特性构成的.在ES5中,属性值可以用一个或两个方法替代,这两个方法就是getter和setter.由getter和setter定义的属性称做 "存储器属性",它不同于 "数据属性",数据属性就是一个简单的值. 当程序查询存取器属性的值时,JS调用getter方法(无参数).这个方法的返回值就是属性存取表达式的值. 当程序设置一个存取器属性的值时,JS调用setter方法,将赋值表达式右侧的值当做参数传入setter

Swift类与结构、存储属性、计算属性、函数与方法、附属脚本等

写了12个Person来复习,不过完成同样的代码需要敲键盘的次数相比OC确实少了很多,这很多应该归功于Swift中不写分号,以及少了OC中的中括号. 一.类与结构体 两者在Swift中差不了多少了 类与结构体有很多相同的地方: (第2,3点是其他语言中不存在的) 1)都可以定义属性/方法/下标(结构体也可以定义方法了) 2)都能初始化(通过构造方法) 3)都能使用扩展(extension)与协议(protocol) 4)类与结构体(枚举)中的全局属性/方法:在类中用class关键字,但在结构体中

【iOS】Swift类与结构、存储属性、计算属性、函数与方法、附属脚本等

写了12个Person来复习,不过完成同样的代码需要敲键盘的次数相比OC确实少了很多,这很多应该归功于Swift中不写分号,以及少了OC中的中括号. 一.类与结构体 两者在Swift中差不了多少了 类与结构体有很多相同的地方: (第2,3点是其他语言中不存在的) 1)都可以定义属性/方法/下标(结构体也可以定义方法了) 2)都能初始化(通过构造方法) 3)都能使用扩展(extension)与协议(protocol) 类比结构体多的功能: 1)能继承 2)运行时能检查类对象的类型 3)析构释放资源

getter 和 setter方法

在ARC下  setter方法 -(void)setUserArray:(NSArray *)userArray{    _userArray = userArray;} //getter方法 -(NSArray *)userArray{    return _userArray;} 在MRC下 setter -(void)setUserArray:(NSArray *)userArray{    if (_userArray != userArray) {                [_u