在vue中，有时候你需要对data中的数据进行处理，或者对抓取的数据进行处理之后再挂载呈现到标签中，这时候你就需要计算属性了，当然看到这里你可能还是不了解那下面我举几个实例并附代码解释。
实例：比如需要将字符串拼接之后呈现到标签，或者计算data之后再呈现到标签，亦或者需要对数组中的数据添删改，当然有些可以在{
{}}mustache中改，但是模板中放入太多的逻辑会让模板过重且难以维护
比如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>是不是很复杂
这时候又有人觉得为什么不用methods函数，将处理的结果通过函数呈现到模板
解释：computed 内部对其进行缓存，只调用一次，只有其中的内容改变之后，才会重新调用
而methods每次都要重新计算，严重消耗效率
这里我们展示字符串拼接
<!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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app_1">
<p>{{fullname}}</p>
</div>
<script>
var app = new Vue({
el: "#app_1",
data: {
firstname: "liu",
secondname: "123",
},
computed: {
fullname: function () {
return this.firstname + " " + this.secondname;
},
},
});
</script>
</body>
</html>
是不是很好用呢？
附官网：
计算属性和侦听器 — Vue.js
版权声明：本文为xiaoyao_zhy原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。