当页面获取某个数据的时候,先会在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. php rtrim的一个坑,很“二”的问题

    一.背景: 做项目的时候遇到一种情况,商家的营业时间显示的问题,设计图上要求显示成:“星期一,星期二,星期三,星期四,星期五,星期六,星期天” 换句话说,就是营业星期勾哪个就显示哪个,类似下面这样: ...

  2. webstorm中.vue报错(es6语法报错)-转

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...

  3. grunt 合并压缩js和css文件(二)

    具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modu ...

  4. transient关键字与序列化、反序列化

    transient,中文翻译是短暂的,和对象序列化.反序列化有关. 一个类只要实现了Serializable接口,则该类实例就可以序列化,具体来说实例的每个非静态成员变量都会序列化.注意是非静态成员变 ...

  5. 分类模型输出y值

    y=w0+w1x1+w2x2+....+wnxn coef_:存储w1,w2,...wn. intercept_:存储w0 dual_coef_*support_vectors_=coef_ (1)S ...

  6. JAVA高并发秒杀API项目的学习笔记

    一步一步的搭建JAVA WEB项目,采用Maven构建,基于MYBatis+Spring+Spring MVC+Bootstrap技术的秒杀项目学习的视频:http://www.imooc.com/l ...

  7. 什么是JavaScript Souce Map

    第一部分 我们经常可以看到后缀名为.map的文件,比如我们下载得到bootstrap的css文件,如下所示: 不难理解bootstrap.css. bootstrap.min.css.等这些常规的代码 ...

  8. 【计算机网络】一步一步学习IP路由流程

    TCP/IP协议簇是目前互联网应用最广的协议栈,谈到TCP/IP协议栈就不能不讲一讲IP路由的问题,因为在我们使用的网络通信中几乎每时每刻都在发生着IP路由的事件…….当你在网络世界中还是一位新手的时 ...

  9. 实现Nginx中使用PHP-FPM时记录PHP错误日志的配置方法

    最近在本地搭建的LNMP的开发环境.为了开发的时候不影响前端的正常开发就屏蔽的PHP里面php.ini中的一些错误提示.但是这样一来,就影响到了后端开发的一些问题比如不能及时调试开发中的一些问题 ng ...

  10. GCC操作

    GCC编译器常用选项 生成动态链接库: gcc file.c -fPIC -o file.so, PIC表示Position-Independent Code: 独立地址代码 编译: gcc -c f ...