computed 的作用主要是对原数据进行改造输出。改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……。
一、格式化输出结果
我们先来做个读出价格的例子:我们读书的原始数据是price:100 但是我们输出给用户的样子是(¥100元)。 主要的javascript代码:
computed:{ newPrice:function(){ return this.price='¥' + this.price + '元'; } }
全部代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Computed Option 计算选项</title> </head> <body> <h1>Computed Option 计算选项</h1> <hr> <div id="app"> {{newPrice}} </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ price:100 }, computed:{ newPrice:function(){ return this.price='¥' + this.price + '元'; } } }) </script> </body> </html>
现在输出的结果就是:¥100元。
二、用计算属性反转数组
例如:我们得到了一个新闻列表的数组,它的顺序是按照新闻时间的顺序正序排列的,也就是早发生的新闻排在前面。这是反人类的,我们需要给他反转。这时我们就可以用到我们的计算属性了。
没有排序的新闻列表,是按照日期正序排列的。
var newsList=[ {title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'}, {title:'日本第二大准航母服役 外媒:针对中国潜艇',date:'2017/3/12'}, {title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'}, {title:'起底“最短命副市长”:不到40天落马,全家被查',date:'2017/3/23'}, ];
我们希望输出的结果:
- 起底“最短命副市长”:不到40天落马,全家被查-2017/3/23
- 中国北方将有明显雨雪降温天气 南方阴雨持续-2017/3/13
- 日本第二大准航母服役 外媒:针对中国潜艇-2017/3/12
- 香港或就“装甲车被扣”事件追责 起诉涉事运输公司-2017/3/10
我们的在computed里的javascript代码:我们用js原生方法给数组作了反转。
computed:{ reverseNews:function(){ return this.newsList.reverse(); } }
总结:computed 属性是非常有用,在输出数据前可以轻松的改变数据。