<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>计算属性、方法和侦听器
</title
>
<script src
="./vue.js"></script
>
</head
>
<body
>
<div id
="root">
{{fullName
}}
</div
>
<script
>
var app
= new Vue({
el
: '#root',
data
: {
firstname
: "hello",
secendname
: "world"
},
computed
: {
fullName
: {
get
: function
() {
return this.firstname
+ " " + this.secendname
},
set
: function
(value
) {
console
.log(value
);
var arr
= value
.split(" ");
this.firstname
=arr
[0];
this.secendname
=arr
[1];
}
}
}
})
</script
>
</body
>
</html
>
如上方的代码，计算属性fullName
当div去读取{{fullName}}这个插值表达式的时候，就会走到get这个函数。
当直接设置fullName值得时候，会走到set函数里面
