当页面获取某个数据的时候,先会在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. MB Star C5 Functions

    The MB STAR C5 notion and brand combination for hardware and software program components will be the ...

  2. from表单,图片预览,和表单提交

    <form> <input id="file" class="topsub-file" type="file" name= ...

  3. TCP/IP协议中几个缩写词的含义 MSL、TTL和RTT 报文最大生存时间 跳数(即生存时间) cs往返时间 MSL要大于TTL知道为什么吗?

    MSL.TTL和RTT简介 1.MSL是Maximum Segment Lifetime英文的缩写,中文可以译为“报文最大生存时间”,他是任何报文在网络上存在的最长时间,超过这个时间报文将被丢弃.因为 ...

  4. Perf -- Linux下的系统性能调优工具,第 2 部分 特殊用法以及内核调优示例

    https://www.ibm.com/developerworks/cn/linux/l-cn-perf2/ 本文内容简介 之前介绍了 perf 最常见的一些用法,关注于 Linux 系统上应用程序 ...

  5. Murano Weekly Meeting 2016.07.05

    Meeting time: 2016.July.05 1:00~2:00 Chairperson:  Kirill Zaitsev, from Mirantis Meeting summary: 1. ...

  6. CI控制器调用内部方法并载入相应模板的做法

    当我打开链接:http://localhost/3g/index/open/a/b?from=timeline后,判断链接中的from是否等于timeline,如果等于timeline,那么就调用控制 ...

  7. app启动黑屏

    由于在手机上多次删除应用,导致加载app时加载缓存图片缺失,进行如下操作: 删除Xcode DerivedData目录释放空间: 1.首先切换到 Finder 程序,打开“前往”菜单. 2.然后按住  ...

  8. poj 2378 删点最大分支不超过一半

    http://poj.org/problem?id=2378 这题和找重心基本一样,判断条件换一下就行 #include <iostream> #include <string> ...

  9. 权限修饰符(public、protected、default、private)权限验证

    一.测试方法 在authorityTest包中建类AuthorityValidate package authorityTest; public class AuthorityValidate { p ...

  10. 反向代理总结-reverse-proxy-with-url-rewrite

    iis 反向代理 : 1. 微软文档 https://docs.microsoft.com/en-us/iis/extensions/url-rewrite-module/reverse-proxy- ...