计算属性computed
computed
在Vue中有多种方法为视图设置值：
1.使用指令直接将数据值绑定到视图
2.使用简单的表达式对内容进行简单的转换
3.使用过滤器对内容进行简单的转换
除此之外，我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。
如果在模板中放入太多的逻辑会让模板过重而且难以维护。官方强调对于任何复杂逻辑，最好使用计算属性。
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
},
updateMessage: {
get: function() {
console.log('计算属性', this.message)
return this.message
}
}
}
注意当模板中不使用updateMessage，即使message发生改变之后，也不会走computed。
computed的getter函数
在vue中，computed的属性可以被视为是data一样，可以读取和设值。因此，在computed中可以分为getter(读取)和setter(设值)，一般情况下，是没有setter的，computed只是预设了getter，也就是只能读取，不可以改变设值。所以，computed默认格式（是不表明getter函数的）
computed中的setter函数
当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候。
<div>{{totalMarks}}</div>
<div>{{computedMsg}}</div>
data () {
return {
results: [
{ name: 'English', marks: 70 },
{ name: 'Math', marks: 80 },
{ name: 'History', marks: 90 }
],
msg:'haha'
}
},
computed: {
totalMarks(){
console.log(1)
let total=0
for(let i=0;i<this.results.length;i++){
total+=this.results[i].marks
}
return total
},
computedMsg:{
get:function(){
return this.msg
},
set:function(newVal){
this.msg=newVal
}
}
},
mounted () {
this.computedMsg='??'
}
最新文章
- linux中grep的应用
- 损失函数(Loss Function) -1
- Error during installing HAXM, VT-X not working 在安装HAXM错误,开始不工作
- kmemleak的使用---内存泄露检测工具【转】
- 基于nodejs模拟浏览器post请求爬取json数据
- JAVA课程设计个人博客 学生成绩管理 201521123014 黄绍桦
- iOS开发中常见bug！（内附解答方法）
- C# 锁系列目录
- 10，EasyNetQ-发布确认
- Linux怎么开启ssh
- 使用ViewDragHelper打造属于自己的DragLayout（抽屉开关 ）
- PHP5.5新特性
- Druid手动设置参数错误
- IE、火狐导入收藏夹乱码解决方案
- android 城市选择
- centOS安装openoffice的方法
- 关于在各种int类型选择时的考虑
- n点游戏
- 在myecplise中更新代码发布后没效果
- TinyXML学习：TiXmlBase类