<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算属性中的：get/set方法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{all}}</h1>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el:’#app’,
data:{
firstnames:’Koby’,
lastnames:’Bye’
},
//计算属性包含了get、set两种方法
computed:{
//最常见的写法all:{set:function(){},get:function(){}}
// all:{
// //当属性被修改或被重新设置时，重新出现
// //可用于触发使用：当某些值改变的时候，触发计算属性set方法
// set:function(res){
// let names = res.split(‘ ‘);
// this.lastnames = names[0];
// this.firstnames = names[1];
// },
// //未发生改变，获取值
// //通常使用get方式多，因为计算属性一般不需要使用修改或设置属性
// get:function(){
// return this.firstnames + ‘ ‘ + this.lastnames
// }
// },
//简化写法，直接get方法，不再包含set
all:function(){
return this.firstnames + ‘ ‘ + this.lastnames;
}
}
})
</script>
</html>
