每一个计算属性都包含一个 getter 和一个 setter, 我们上篇示例都是计算属性的默认用法,只是利用了 gerrer 来读取.在你需要时,也可提供一个 setter 函数,当手动修改计算属性的值就想修改一个普通数据那样时,就会触发 setter 函数,执行一些自定义的操作.
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app">
姓名: {{ fullName }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Javk',
lastName: 'Green'
},
computed: {
fullName: {
// getter 用于读取
get: function () {
return this.firstName + '' + this.lastName;
},
// stter 写入时触发
set: function (newValue) {
var names = newValue.split('');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
})
</script>
</body>
</html>
注: 当执行 app.fullName = 'John Doe'时,setter 就会被调用,数据 firstName 和 lastName 都会相对更新,视图同样也会更新.
网友评论