不积跬步,无以至千里;不积小流,无以成江海。
Vuejs语言基础
computed属性(计算属性):
1. 用来监控自己定义的变量(依赖了其它的值),该变量不在 data 里面声明,直接在computed里面定义;
2. 适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化,监控的这个值也就会发生变化;
3. 根据现有数据生成一个新数据,并且这两个数据会永久的建立关系包括缓存,当无关数据改变的时候,不会重新计算而是直接使用缓存中的值。
<div id="app"> <p>计算属性fullName:{{fullName}}</p> </div> <script> var vm = new Vue({ el: ‘#app‘, data: { firstName: ‘Foo‘, lastName: ‘Bar‘, }, computed: { fullName: function () { return this.firstName + ‘ ‘ + this.lastName } } }) </script>
计算属性的 getter 和 setter(默认只有getter,不过在需要时你也可以提供一个setter。):
computed:{ fullName: { get: function(){ return this.firstName + ‘ ‘ + this.lastName; }, set: function(newValue){ let names = newValue.split(‘ ‘); this.firstName = names[0]; this.lastName = names[1]; } } }