<!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>
