先看两个例子：
<div id="example">{{name}}</div>
<script>
var vm = new Vue({
el: '#example',
data: {
name: '张三'
}
})
</script><div id="example">{{name}}</div>
<script>
var vm = new Vue({
el: '#example',
computed: {
name: function(){return '张三';}
}
})
</script>运行结果一样的，粗看没什么区别，我们试着修改下name属性值，会发现computed的修改会出错，这是因为computed里的属性默认只有getter，也就是只读的，不能赋值：
如果要赋值，还需给它要加上setter：
<div id="example">{{name}}</div>
<script>
var vm = new Vue({
el: '#example',
data: {
temp_name: '张三'
},
computed: {
name: {
//getter
get: function(){
return this.temp_name;
},
//setter
set: function(newval){
this.temp_name = newval;
}
}
}
})
</script>OK，这样就和data一样了，可以看到，computed可以更精细的控制属性读写，但它需要借助一个临时变量(temp_name)才能实现，这样跟C#的字段和属性差不多意思了。当然了，官方称computed为计算属性，computed更大的意义在于计算，再看个例子：
<div id="example">
姓名：{{name}}<br/>
语文：{{chinese}}<br/>
英语：{{english}}<br/>
总分：{{score}}
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
name: '张三',
chinese: 90,
english: 85
},
computed: {
score: function(){
return this.chinese + this.english;
}
}
})
</script>
评论（0）
暂无评论。