<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>computed Option 计算选项</title> <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <script src="../assets/js/flexible_css.js"></script> <script src="../assets/js/flexible.js"></script> <script src="../assets/js/vue.js"></script> </head> <body> <div id="app"> <p>{{newPrice}}</p> <ul> <!-- <li v-for="item in items">{{item.title}}-{{item.date}}</li> 正常循环输出 --> <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:{ price:100, items:newsList }, computed:{ //computed 的作用主要是对原数据进行改造输出。 newPrice:function(){ return this.price='¥'+this.price+'元'; }, reverseNews:function(){ return this.items.reverse(); //reverse 反转容器内容 不实排序 不打乱顺序 } } }) </script> </html>