夜光序言:
其实,我们每一个人,都是社会的一员,不论在哪里学习和工作,个人的光和热,只有融入集体,融入社会,才能开出光彩夺目的花朵,结出丰硕之果。而每一个单位,每一个行业,每一个地方,只有依靠每个成员的努力,才能创造出光辉的业绩。
正文:
首先声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script src="../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'WhiteBlack!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script src="../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Yeguang',
url: 'http://www.CSDN.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter, vm.name 和 vm.url 也会被对应更新
vm.site = '夜光 http://www.csdn.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>
</html>