技术QQ交流群:294088839
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue computed Option 计算选项</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>Vue computed Option 计算选项</h1> <hr> <div id="app"> <p>{{newPrc}}</p> <ul> <li v-for="item in reverNews">{{item.title}}--{{item.date}}</li> </ul> </div> </body> </html> <script> //不污染原始数据的前台下 展示到页面上 var newsList=[ {title:'中国人',date:'2018-7-15'}, {title:'美国人',date:'2018-7-16'}, {title:'非洲人',date:'2018-7-17'}, {title:'俄罗斯人',date:'2018-7-18'} ]; var app = new Vue({ el:'#app', data:{ prc:100, newsList:newsList }, computed:{ newPrc:function(){ return this.prc='¥'+this.prc+'元'; }, reverNews:function () { //reverse 倒序 return this.newsList.reverse() } } }) </script>