标签：ever es2017 多次 结果 简单 相同 模版 split bsp
一、计算属性
1、模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的。在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码:
<div id="example"> {{ message.split(‘‘).reverse().join(‘‘) }} </div>
在这个地方,模版不在是简单的声明式逻辑,你必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串,当你想要在模版中多次引用此处的翻转字符串时,就会更加难以处理.
所以,任何复杂逻辑，你都应当使用计算属性,基础例子如下:
<body> <div id="currentPage"> <p>Original message:"{{message }}"</p> <p>Computed reversed message:"{{reversedMessage }}"</p> </div> </body> <script type="text/javascript"> var currPage=new Vue({ el:"#currentPage", data:{ message:"https://www.baidu.com" }, computed:{ reversedMessage:function () { return this.message.split(‘‘).reverse().join(‘‘) } } }); </script>
2、计算属性缓存vs方法
上面的功能通过方法也可以实现,但是通过方法和计算属性实现相同的功能是有区别的,虽然两种计算方式的最终结果完全相同.
标签：ever es2017 多次 结果 简单 相同 模版 split bsp
原文地址：http://www.cnblogs.com/GreenLeaves/p/7853244.html
