Vue从入门到实战:定义计算属性
来自CloudWiki
背景介绍
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<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>