您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 计算属性

《和小米一起学Vue.js》— 计算属性

[ 孤狼 | 2022-07-29 01:05:08 | Vue | 1235°C | 0条评论 ]

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以我们需要一个能进行大量运算的计算属性。


计算属性

计算属性需要单独写在 computed 下,在使用Mustache语法调用的时候 不需要  "()" .


缓存

计算属性是基于它们的响应式依赖进行缓存的,只要计算元素不变,则调用都会输出之前缓存结果不会重新计算。函数方式会重新计算结果,即使计算元素没有改变。所以计算属性更加高效。

TIP:需要实时更新或变化的数据,不要使用计算属性。  


setter

计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter 



案例

<!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>




转载请注明出处:http://gl.paea.cn/n.php?n=171
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索