当页面获取某个数据的时候,先会在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. 20-----BBS论坛

    BBS论坛(二十) 20.1.cms添加轮播图后台逻辑代码完成 (1)apps/models.py from exts import db from datetime import datetime ...

  2. java 开发体系参考学习

    https://www.oschina.net/question/2663968_2283797

  3. RTT之AT命令组件

    包含客户端和服务器:用于GPRS和3G的通讯命令格式.四种基本功能 测试功能:AT+<x>=? 用于查询命令参数格式及取值范围: 查询功能:AT+<x>? 用于返回命令参数当前 ...

  4. inventor删除不干净

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  5. 打开/关闭网卡无线WIFI模块

    @echo off title ------(Please run as Administrators)Please select------ :begin echo ---------------- ...

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

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

  7. 最新版本dede与discuz通过ucenter完美整合

    人合租虚拟主机.然后到相关的官方网站上面下载相关的程序,我下载的是DedeCmsV5.7-GBK+Discuz_X2_RC_SC_GBK+UCenter_1.6.0_SC_GBK这个程序组合.涉及到怎 ...

  8. java连接数据库驱动代码综合共享

    1.Oracle8/8i/9i数据库(thin模式)Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();S ...

  9. GitKraken使用教程-基础部分(8)

    9.  远程(Remote)仓库 1) 添加远程仓库 一般在本地新建仓库后,需要添加一个远程仓库用于push/pull代码.鼠标移至GitKraken左侧区域的REMOTE栏,点击 该栏右边出现的 按 ...

  10. 转:MVC中的文件上传

    上传文件与与上传数据区别 上传数据主要指json等简单字符串,上传文件指的是上传word.excel图片等.在上传数据的时候enctype默认为第一个application/x-www-form-ur ...