学习笔记(22):Vue2.x从入门到实战-computed Option 计算选项

立即学习:https://edu.csdn.net/course/play/6823/135331?utm_source=blogtoedu

computed 计算选项

computed 选项不改变原始数据，对数据进行格式的编辑，大小写转换，顺序重排，添加符号……。

我们先做个分数的例子

var app = new Vue({
        el:'#app',
        data:{
            score:100,
            news:newsList
        },
        computed:{
            newscore:function () {
                return this.score='总分:'+this.score+'分';
            }
        }
    })

输出格式为：总分：100分

computed还可以反转数组，例子如下：

先定义一个数组：

var newsList=[
        {title:'以法律利剑斩断"野味"产业链 6起违法销售野生动物案例曝光',data:'2020/2/22'},
        {title:'法制网评：潜力大 韧性足 疫情难撼中国经济',data:'2020/2/23'},
        {title:'【学理战"疫"】以文明良好科学素养增强心理免疫力',data:'2020/2/24'},
        {title:'【战疫最前线】武汉ICU护士长50天没回家 父亲把思念作成画',data:'2020/2/25'}
    ]

用computed选项中进行顺序改变：

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

这里用到原生JS的revers()方法

新手一枚，若有不足，请指正！