Ember之Computed Properties计算属性

开心一笑

老师问：麦克，你怎么没有做历史作业？
麦克：对不起，我昨晚去会女朋友了
老师问：老师问是历史作业重要还是女朋友重要，、
麦克说：如果我不去见她，她就会成为历史

视频教程

大家好，我录制的视频《Java之优雅编程之道》已经在CSDN学院发布了，有兴趣的同学可以购买观看，相信大家一定会收获到很多知识的。谢谢大家的支持……

视频地址：http://edu.csdn.net/lecturer/994

提出问题

Ember计算属性如何简单使用？？？

解决问题

计算属性(COMPUTED PROPERTIES)

以下内容来自Ember官网：http://guides.emberjs.com.cn/object-model/computed-properties/

例一：计算属性简单运用
//创建一个Person对象
Person = Ember.Object.extend({

  firstName: null,lastName: null,//fullName是一个计算属性，firstName和lastName的变化都会触发方法//重新计算fullName的值  fullName: Ember.computed('firstName', 'lastName', function() {return this.get('firstName') + ' ' + this.get('lastName');})
});//创建一个ironMan的Person对象
var ironMan = Person.create({firstName: 'Tony',lastName:  'Stark'
});ironMan.get('fullName'); // "Tony Stark"

例二：

Person = Ember.Object.extend({firstName: null,lastName: null,age: null,country: null,//fullName是一个计算属性，firstName和lastName的变化都会触发方法//重新计算fullName的值  fullName: Ember.computed('firstName', 'lastName', function() {return this.get('firstName') + ' ' + this.get('lastName');}),//description除了计算age和country的属性变化，还计算fullName变化description: Ember.computed('fullName', 'age', 'country', function() {return this.get('fullName') + '; Age: ' + this.get('age') + '; Country: ' + this.get('country');})
});
//创建一个captainAmerica的Person实例
var captainAmerica = Person.create({firstName: 'Steve',lastName: 'Rogers',age: 80,country: 'USA'
});captainAmerica.get('description'); // "Steve Rogers; Age: 80; Country: USA"

例三：
//重新设置firstName的值，fullName和description都会重新计算
captainAmerica.set(‘firstName’, ‘William’);

captainAmerica.get('description'); // "William Rogers; Age: 80; Country: USA"

例四：

Person = Ember.Object.extend({firstName: null,lastName: null,//可以通过get改变计算属性返回的值或者set设置计算属性的值fullName: Ember.computed('firstName', 'lastName', {get(key) {return this.get('firstName') + ' ' + this.get('lastName');},set(key, value) {var [firstName, lastName] = value.split(/\s+/);this.set('firstName', firstName);this.set('lastName',  lastName);return value;}})
});var captainAmerica = Person.create();
captainAmerica.set('fullName', 'William Burnside');
captainAmerica.get('firstName'); // William
captainAmerica.get('lastName'); // Burnside

读书感悟

据此可知，当你有求于对方的时候，先提出一个小要求，当对方同意以后，再将大的要求提出来。这时候，对方可能会因为同意了前一个要求而很难拒绝后面的要求。由微至著，由浅入深，这就是心理学上的“登门槛效应”。
像鱼一样思考
找到彼此的共同点，能够拉近距离

Ember之Computed Properties计算属性相关推荐

vue，computed，计算属性
vue,computed,计算属性用法: computed: {didiFamily: {// getterget: function () {return this.data_i + ' ' + ...
component、 filters（过滤器）、computed（计算属性）、$watch（观察属性）、设定计算属性
组件知识点 component component 定义页面的局部区域块,完成单独的页面小功能. <div id="myApp"><ol><game ...
Vue中的（computed）计算属性和（watched）侦听属性以及（methods）方法
1. computed 计算属性可用于快速计算视图中显示的属性. 这些计算将被缓存,并且只在需要时更新. 他的方法不需要在data里面定义它们完全是同步的. <div class=" ...
vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
vue 计算属性和data_vue之watch和计算属性computed
区别一:watch监听的是一个变量(或者一个常量)的变化,这个变量可能是一个单一的变化也可能是一个数组.computed可以监听很多个变量,但是这个变量一定是vue实例里面的. Vue 测试实例 - ...
vue计算属性computed与监听属性watch的基本使用
目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 反转字符串的示例 <!DOCTYPE ...
计算属性computed里面的getter和setter
参考一: 在 Vue 中,computed 的属性可以被视为是 data 一样,可以读取和设值,因此在 computed 中可以分成 getter(读取) 和 setter(设值),一般情况下是没有 ...
第十六篇 Computed 计算属性的应用
本篇内容主要讲计算属性的相关知识,如果从之前的有一直关注这一系列的文章内容的话,就会发现之前的一些案例可以用其他方法方式去做,比如第八篇.第九篇所提及到的模糊查询以及第十四篇实现购物车页面的一 ...
vue的计算属性computed
计算属性的应用场景从已有的数据A中计算等到的新的数据B,使用计算属性如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 定义格式计算属 ...
vue计算属性computed和侦听属性watch的用法和区别
计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用.注意:计算属性里面必须要ruturn,否则无法拿到结果.计算属性 ...