“Vue从入门到实战：定义计算属性”的版本间的差异
来自CloudWiki
（创建页面，内容为“==背景介绍== 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难…”） |
|||
| 第41行： | 第41行： | ||
</body> | </body> | ||
</html></nowiki> | </html></nowiki> | ||
| + | |||
| + | 我们声明了一个计算属性reversedMessage,给出的函数将用作属性vm.reversed-Message的getter函数 | ||
| + | |||
| + | 输出： | ||
| + | |||
| + | <nowiki> | ||
| + | 原始字符串: Hello，Vue.js无难事! | ||
| + | |||
| + | 计算后的反转字符串: !事难无sj.euV，olleH</nowiki> | ||
| + | |||
| + | 当message属性的值改变时，reversedMessage的值也会自动更新，并且会自动更新DOM部分。 | ||
| + | |||
| + | 计算属性默认只有getter，因此是不能直接修改计算属性的，如果需要也可以提供一个setter. | ||
| + | |||
| + | <nowiki> | ||
| + | <!DOCTYPE html> | ||
| + | <html> | ||
| + | <head> | ||
| + | <meta charset="UTF-8"> | ||
| + | <title>计算属性的getter和setter</title> | ||
| + | </head> | ||
| + | <body> | ||
| + | <div id="app"> | ||
| + | <p>First name: <input type="text" v-model="firstName"></p> | ||
| + | <p>Last name: <input type="text" v-model="lastName"></p> | ||
| + | <p>{{ fullName }}</p> | ||
| + | </div> | ||
| + | |||
| + | <script src="vue.js"></script> | ||
| + | <script> | ||
| + | var vm = new Vue({ | ||
| + | el: '#app', | ||
| + | data: { | ||
| + | firstName: 'Smith', | ||
| + | lastName: "Will" | ||
| + | }, | ||
| + | computed: { | ||
| + | fullName: { | ||
| + | // getter | ||
| + | get: function () { | ||
| + | return this.firstName + ' ' + this.lastName | ||
| + | }, | ||
| + | // setter | ||
| + | set: function (newValue) { | ||
| + | var names = newValue.split(' ') | ||
| + | this.firstName = names[0] | ||
| + | this.lastName = names[names.length - 1] | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }) | ||
| + | </script> | ||
| + | </body> | ||
| + | </html></nowiki> | ||
| + | |||
| + | 在控制台窗口输入vm.fullName = "Mark Twiwn" ，可以看到firstName和lastName的值也同时发生了改变，这是调用fullName的setter函数来实现的。 | ||
2021年2月8日 (一) 01:58的最新版本
背景介绍
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。
定义计算属性
表达式的逻辑过于复杂的时候，都应当考虑使用计算属性。计算属性是以函数形式，在Vue实例的选项对象的compute选项中定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性</title>
</head>
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后的反转字符串: {{ reversedMessage }}</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello，Vue.js无难事!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
我们声明了一个计算属性reversedMessage,给出的函数将用作属性vm.reversed-Message的getter函数
输出：
原始字符串: Hello，Vue.js无难事! 计算后的反转字符串: !事难无sj.euV，olleH
当message属性的值改变时，reversedMessage的值也会自动更新，并且会自动更新DOM部分。
计算属性默认只有getter，因此是不能直接修改计算属性的，如果需要也可以提供一个setter.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性的getter和setter</title>
</head>
<body>
<div id="app">
<p>First name: <input type="text" v-model="firstName"></p>
<p>Last name: <input type="text" v-model="lastName"></p>
<p>{{ fullName }}</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Smith',
lastName: "Will"
},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})
</script>
</body>
</html>
在控制台窗口输入vm.fullName = "Mark Twiwn" ，可以看到firstName和lastName的值也同时发生了改变，这是调用fullName的setter函数来实现的。
