omputed Option 计算选项(19)

一、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 属性是非常有用，在输出数据前可以轻松的改变数据。也不污染原始数据。