1.为何需要计算属性？
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁
2. 计算属性的用法
1.定义
computed: {
自定义函数名称: function () {
具体业务逻辑
}
}2.调用
<div>自定义函数名</div>3.计算属性与方法的区别
- 计算属性是基于它们的依赖进行缓存的
- 方法不存在缓存
4.实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!--
因为计算属性是基于 data 中的数据进行处理的，所以只要 data 里的数据变了，计算属性便会被激活
-->
<input v-model="name" aria-label="" type="text" placeholder="请输入您的姓名">
<div>{{self_computed_function}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data: {
name: 'hu hai'
},
methods: {
},
/*
自定义计算属性, 函数名为 self_computed_function
*/
computed:{
self_computed_function: function () {
return 'hello, ' + this.name + ' good night!'
}
}
});
</script>
</body>
</html>