版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/soulwyb/article/details/86231976
关于computed计算属性的内容 可以移步到这里查看，这里就不再啰嗦
https://blog.csdn.net/soulwyb/article/details/86228326
get：
在页面获取计算属性内容的时候调用。代码示例：
<!DOCTYPE html>
<html>
<head>
<title>计算属性的get方法和set方法</title>
<script src="vue.js"></script>
</head>
<body>
<div id='app'>
{{FullName}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
FirstName: 'Dell',
LastName: 'Lee'
},
computed: {
FullName: {
get: function() {
return this.FirstName + ' ' + this.LastName;
}
}
}
})
</script>
</html>与computed的默认写法基本一样。
set：
<!DOCTYPE html>
<html>
<head>
<title>计算属性的get方法和set方法</title>
<script src="vue.js"></script>
</head>
<body>
<div id='app'>
{{FullName}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
FirstName: 'Dell',
LastName: 'Lee'
},
computed: {
FullName: {
get: function() {
return this.FirstName + ' ' + this.LastName;
},
set: function(value) {
console.log(value)
var arr = value.split(" ");
this.FirstName = arr[0];
this.LastName = arr[1];
}
}
}
})
</script>
</html>效果：
set方法是在数据发生改变的时候调用相应的代码执行。比如上面的代码。在set方法被调用后改变FirstName和LastName变量。而改变这两个变量后又相对应的触发了get方法。然后get方法将数据返回给FullName 最后显示到页面上。