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 屬性是非常有用，在輸出數據前可以輕松的改變數據