当页面获取某个数据的时候,先会在data里面找,找不到就会去计算属性里面找,在计算属性里面,获取的时候会自动去执行get方法
<div id='app'>
  {{fullName}}
</div> <script>
  var vm = new Vue({
    el:'#app',
    data:{
      firstName: 'Mike',
      lastName: 'Lee'
    },
    computed:{
      fullName:{
        get:function(){
          return this.firstName + this.lastName
        }
      }
    }
  })
</script>
既然可以写get,自然可以写与之对应的set
<div id='app'>
  {{fullName}}
</div> <script>
  var vm = new Vue({
    el:'#app',
    data:{
      firstName: 'Mike',
      lastName: 'Lee'
    },
    computed:{
      fullName:{
        get:function(){
          return this.firstName + this.lastName
        },
        set:function(value){
          var arr = value.split(' ');
          this.firstName = arr[0];
          this.lastName = arr[1];
        }
      }
    }
  })
</script>
当控制台去设置fullName值的时候,会自动执行set方法,比如vm.fullName='Mike Wang',fullName被设置,fullname会打散,重新改变firstName和lastName的值

vuejs计算属性getter和setter的更多相关文章

  1. VueJS计算属性: computed

    computed属性 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

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

    内容要点: 一.对象属性     对象属性是由名字.值和一组特性构成的.在ES5中,属性值可以用一个或两个方法替代,这两个方法就是getter和setter.由getter和setter定义的属性称做 ...

  3. 属性getter和setter

    我们知道,对象属性是由名字.值和一组特性(attribute)构成的.在ECMAScript5 中,属性值可以用一个或两个方法替代,这两个方法就是getter和setter.由getter和sette ...

  4. Vuex之store仓库计算属性Getter

    (1)简介 Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里可以通过定义vuex的Getter来获 ...

  5. vuejs计算属性和侦听器

    <div id='root'> 姓:<input v-model='firstName'/> 名:<input v-model='secondName'/> < ...

  6. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  7. 关于vue.js的计算属性练习代码

    参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  8. Vue.js-05:第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  9. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

随机推荐

  1. C# 利用ITextSharp导出PDF文件

    最近项目中需要导出PDF文件,最后上网搜索了一下,发现ITextSharp比较好用,所以做了一个例子: public string ExportPDF() { //ITextSharp Usage / ...

  2. Spark为什么比Hadoop好?

    (1)Spark计算速度远胜于Hadoop的原因之一就在于中间结果是缓存在内存而不是直接写入到disk Hadoop每次计算先写磁盘,下次计算先从磁盘读,计算结果再写磁盘,如此往复.这对于迭代计算,是 ...

  3. Mybatis学习笔记6 - #{}和${}

    #{}:可以获取map中的值或者pojo对象属性的值.${}:可以获取map中的值或者pojo对象属性的值. 区别: #{}:是以预编译的形式,将参数设置到sql语句中:PreparedStateme ...

  4. Kubernetes中的nodePort,targetPort,port的区别和意义

    1. nodePort 外部机器可访问的端口. 比如一个Web应用需要被其他用户访问,那么需要配置type=NodePort,而且配置nodePort=30001,那么其他机器就可以通过浏览器访问sc ...

  5. (转)AIX下修改用户最大进程数

    AIX下修改用户最大进程数 原文:http://blog.csdn.net/feichideche/article/details/39498555 使用AIX时候,切换用户,发现进程一直挂起,查看用 ...

  6. #include <bits/stdc++.h>头文件

    这实际上就是一个头文件的集合,可以看看他的定义. #ifndef _GLIBCXX_NO_ASSERT #include <cassert> #endif #include <cct ...

  7. Windows 10家庭版升级到专业版,系统蓝屏

    Log Name: SystemSource: Microsoft-Windows-DistributedCOMDate: 9/9/2018 7:56:57 PMEvent ID: 10016Task ...

  8. webkit技术--网页渲染原理

    Webkit渲染 Webkit 是苹果发起的一个开源项目,后来谷歌用这个项目以 webkit 创建了一个新的项目 Chromium,我们平常用的 Chrome 浏览器一般都是基于 Chromium 开 ...

  9. Ajax原理实现

    jQuery的ajax实现原理: // 1.创建一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 2.打开请求 xhr.open('METHO ...

  10. Bootsrap Table表格分页

    一 bootsrap简介 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...