您的位置：首页 > Web前端 > Vue.js

Vue学习笔记3.5 计算属性computed中的 get方法和set方法

2019-01-10 14:42 756 查看

关于computed计算属性的内容可以移步到这里查看，这里就不再啰嗦

https://blog.csdn.net/soulwyb/article/details/86228326

get：

在页面获取计算属性内容的时候调用。代码示例：

[code]<!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：

[code]<!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 最后显示到页面上。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航