computed Option 计算选项 · web前端

computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……。 # 格式化输出结果：我们先来做个读出价格的例子：我们读书的原始数据是price:100 但是我们输出给用户的样子是（￥100元）。主要的javascript代码 ~~~ computed:{ newPrice:function(){ return this.price='￥' + this.price + '元'; } } ~~~ ~~~ <body> <div id="app"> {{newPrice}} </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { price: 100 }, computed: { newPrice: function () { return this.price = '$' + this.price + '元'; } } }); </script> ~~~ 现在输出的结果就是：`$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(); } } ~~~ ~~~ <body> <div id="app"> <ul> <li v-for="item in reverseNews"> {{item.title}}---{{item.date}} </li> </ul> </div> </body> <script type="text/javascript"> var newsList = [{ title: '香港或就“装甲车被扣”事件追责起诉涉事运输公司', date: '2017/3/10' }, { title: '日本第二大准航母服役外媒：针对中国潜艇', date: '2017/3/12' }, { title: '中国北方将有明显雨雪降温天气南方阴雨持续', date: '2017/3/13' }, { title: '起底“最短命副市长”：不到40天落马，全家被查', date: '2017/3/23' }, ]; var app = new Vue({ el: '#app', data: { newsList: newsList, }, computed: { reverseNews: function () { return this.newsList.reverse(); } } }); </script> ~~~ 总结：computed 属性是非常有用，在输出数据前可以轻松的改变数据