Vue2.0 【第三季】第2节 computed Option 计算选项

Vue2.0 【第三季】第2节 computed Option 计算选项

---

第2节 computed Option 计算选项

computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……

一、格式化输出结果

我们先来做个读出价格的例子：我们读书的原始数据是price:100 但是我们输出给用户的样子是（￥100元）。

主要的javascript代码：

computed:{
    newPrice:function(){
        return this.price='￥' + this.price + '元';
    }
}

全部代码：

    
    
    


    
Computed Option 计算选项
    

    

        {{newPrice}}
    

    

浏览器效果：

二、用计算属性反转数组

例如：我们得到了一个新闻列表的数组，它的顺序是安装新闻时间的顺序正序排列的，也就是早反生的新闻排在前面。这是反人类的，我们需要给它反转。这时我们就可以用到我们的计算属性了。

没有排序的新闻列表，是安装日期正序排列的。

var newsList=[
    {title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
    {title:'日本第二大准航母服役 外媒：针对中国潜艇',date:'2017/3/12'},
    {title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
    {title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'},
];

我们希望输出的结果：

• 起底“最短命副市长”：不到40天落马，全家被查-2017/3/23
• 中国北方将有明显雨雪降温天气 南方阴雨持续-2017/3/13
• 日本第二大准航母服役 外媒：针对中国潜艇-2017/3/12
• 香港或就“装甲车被扣”事件追责 起诉涉事运输公司-2017/3/10

我们的在computed里的javascript代码：我们用js原生方法给数组作了反转。

computed:{
    reverseNews:function(){
        return this.newsList.reverse();
    }
}

完整代码：

    
    
    
    

    
        
computed
        

        

            
{{newPrice}}
            

                
{{item.title}}-{{item.date}}
            
        

        
    

浏览器效果：

总结：computed 属性是非常有用，在输出数据前可以轻松的改变数据。