一、computed作用
computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……。
为了不污染原始数在computed里进行改造
<div id="app">
<h1>{{newPrice}}</h1>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
price:100
},
computed:{
newPrice:function(){
return '￥'+this.price+'元'
}
}
})
</script>
给price加￥和元，可以使用computed,使用插值的时候用newPrice，这样避免污染原始数据。
二、新闻列表
<div id="app">
<h1>{{newPrice}}</h1>
<ul>
<li v-for="news in reverseNew">{{news.title}}-{{news.date }}</li>
</ul>
</div>
<script>
var newList=[
{title:'hshhshs1h',date:'2017/3/17'},
{title:'hshhshs2h',date:'2017/3/19'},
{title:'hshhshs3h',date:'2017/3/20'},
{title:'hshhshs4h',date:'2017/3/21'}
]
var app=new Vue({
el:"#app",
data:{
price:100,
newList:newList
},
computed:{
newPrice:function(){
return this.price = '￥'+this.price+'元'
},
reverseNew:function(){
return this.newList.reverse()
}
}
})
</script>
把新闻列表倒序
在computed里可以用js原生方法给数组作了反转。
reverseNew:function(){
return this.newList.reverse()
}
computed 属性是非常有用，在输出数据前可以轻松的改变数据。也不污染原始数据。
