查看“Vue从入门到实战:定义计算属性”的源代码
←
Vue从入门到实战:定义计算属性
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==背景介绍== 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: <nowiki><div id="example"> {{ message.split('').reverse().join('') }} </div></nowiki> 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。所以,对于任何复杂逻辑,你都应当使用计算属性。 ==定义计算属性== 表达式的逻辑过于复杂的时候,都应当考虑使用计算属性。计算属性是以函数形式,在Vue实例的选项对象的compute选项中定义。 <nowiki> <!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></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函数来实现的。
返回至
Vue从入门到实战:定义计算属性
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息