模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以我们需要一个能进行大量运算的计算属性。
计算属性需要单独写在 computed 下，在使用Mustache语法调用的时候 不需要 加 "()" .
计算属性是基于它们的响应式依赖进行缓存的，只要计算元素不变，则调用都会输出之前缓存结果不会重新计算。函数方式会重新计算结果，即使计算元素没有改变。所以计算属性更加高效。
TIP：需要实时更新或变化的数据，不要使用计算属性。
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
孤狼 | 
2022-07-29 01:05:08 | 
1355°C | 
0条评论 ]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 计算属性</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="msg">
<div>{{info2}}</div>
<button v-on:click="cn">改名</button>
</div>
<script>
let ndata={
name:'张三',
age:'18岁',
work:'工人'
};
const v=new Vue({
el:"#msg",
data:ndata,
//计算属性
computed: {
info:function(){
return this.name+this.age+this.work;
},
info2:{
get: function () {
return this.name+this.age+this.work;
},
set: function (newname) {
this.name=newname+'(修改后)';
}
}
},
methods: {
cn:function(){
this.info2='李四';
}
},
});
</script>
</body>
</html>
赞赏一个鸡腿
