当页面获取某个数据的时候,先会在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. EF上下文容器,保存线程唯一性

    在工作中有个疑问,就是EF上下文容器到底创建了多少个? 在asp.net中,EF上下文容器.如果只要有一个,则每次一个用户访问,添加一些实体,然后又不会自动销毁,就会造成内存爆炸.如果每次创建一个,则 ...

  2. python学习3(转载)

    主要内容: 列表 和 元组和字典 列表 一.列表介绍 列表是一种能存储大量数据的数据结构,是能装对象的对象.由方括号 [] 括起来,能放任意类型的数据,数据之间用逗号隔开 列表存储数据是有顺序的 二. ...

  3. gitlab 邮件配置

    vim /etc/gitlab/gitlab.rb gitlab_rails['smtp_enable'] = true gitlab_rails['smtp_address'] = "sm ...

  4. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  5. 数据库mysql基础语言--各模式的含义

    1. 欢迎信息 欢迎来到 MySQL 镜像.命令以 ; 或 g 结束.你的 MySQL 连接编号为 2.服务器版本:5.1.47-社区 MySQL 社区服务器(GPL) 版权(C)2000.2010, ...

  6. 执行ORACLE SQL时如何 忽略替换变量(转载)

    你想在SQL*Plus里执行一个脚本,脚本里包含了一些看起来像替换变量的元素,但实际上你并不是想把它们当替换变量来处理.这时你想让解析器忽略它们而不是提示用户输入.解决方案1有一种解决方案就是在&am ...

  7. 二叉搜索树-php实现 插入删除查找等操作

    二叉查找树(Binary Search Tree),(又:二叉搜索树,二叉排序树)它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若它的 ...

  8. 自定义input文件上传 file的提示文字及样式

    简单记录一下 效果图: 代码: <input class="aload" type='button' value='上传附件' onClick='javascript:$(& ...

  9. C# params 动态参数

    public delegate void Action(params object[] args); 再简单的东西都要强迫自己记录了,前段时间硬盘坏了,资料全没了,也没有备份,太痛苦了,那么多资料全没 ...

  10. div的浮动(float)

    什么是浮动 浮动,故名思议,就是移动位置. 之所以不叫移动,而叫浮动,那是因为给元素设置浮动后,元素会浮到文档上面来,术语叫脱离文档流. 例子 下面我们看例子 <html> <hea ...