计算属性
计算属性：所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。
-
有缓存的功能
-
有get和set
每一个计算属性都包含一个getter和一个setter，我们上面的两个示例都是计算属性的默认用法，只是利用了getter来读取。在你需要时，也可以提供一个setter函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter函数，执行一些自定义的操作，computed: { fullName: { // getter，用于读取 get: function () { return this.firstName + ' ' + this.lastName; }, // setter，写入时触发 set: function (newValue) { var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1]; } } }示例：
代码清单 charp-03/3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 指令与事件</title>
</head>
<body>
<div id="app">
<a target="_blank" v-bind:href="url">百度一下</a>
<a target="_blank" :href="url">百度一下(语法糖)</a>
<h1 v-if="show">你好</h1>
<button v-on:click="showOrHideClick">{{showText}}</button>
<button @click="showOrHideClick">{{showText}}((语法糖))</button>
</div>
<script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
show: true,
url: 'http://www.baidu.com'
},
methods: {
showOrHideClick: function () {
this.show = !this.show;
}
},
computed: { //计算属性（有缓存的功能）
showText: function () {
return this.show ? "隐藏" : "显示";
}
},
})
</script>
</body>
</html>
<button>{{showText}}</button>
...
data: {
show: true,
},
computed: { //计算属性（有缓存的功能）
showText: function () {
return this.show ? "隐藏" : "显示";
}
},