computed 的作用主要是对原数据进行改造输出。改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……。
格式化输出结果
我们先来做个读出价格的例子:我们读书的原始数据是price:100 但是我们输出给用户的样子是(¥100元)。
html
js
var vm = new Vue({ el:"#app", data:{ number:120 }, computed:{ // 记得return 出来啊 newNumber:function(){ return this.number="¥"+this.number+'元' } } })
用计算属性反转数组(倒序)
html
var data = [ { "title":"香港或就“装甲车被扣”事件追责 起诉涉事运输公司","data":"2017/3/12"}, { "title":"香港或就“装甲车被扣”事件追责 起诉涉事运输公司","data":"2017/3/15"}, { "title":"香港或就“装甲车被扣”事件追责 起诉涉事运输公司","data":"2017/3/26"} ] var vm = new Vue({ el:"#app", data:{ items:data }, computed:{ newItems:function(){ return this.items.reverse(); } } })