关于前端:VUE中-filterscomputedmethodswatch用法

过滤器 filters
可被用于一些常见的文本格式化
获取不到 this
能够承受参数
计算属性 comuted
对于任何简单逻辑，你都该当应用计算属性
计算缓存
能够获取 this
不能够承受参数
办法 methods
…
侦听器 watch
当须要在数据变动时执行异步或开销较大的操作时
!!! 慎用
<template>

<div>
    <div>{{status}}</div>

    <div>{{statusMethod(status)}}</div>

    <div>{{statusComputed}}</div>

    <div>{{status | statusFilter}}</div>

    <div v-if="show">{{sum}}</div>

    <button @click="cliskC">click{{s}}</button>
</div>

</template>

<script>

export default {data() {
        return {
            show: false,
            s: '',
            j: 0,
            status: '2',
            statusMap: {
                '1': '开始',
                '2': '进行中',
                '3': '完结'
            }
        }
    },
    mounted() {setTimeout(() => {this.show = true;}, 3000)
    },
    computed: {statusComputed() {return this.statusMap[this.status]
        },
        sum() {console.log(new Date().getTime())
            var sum = 0;
            for(let i=0; i< 900000000; i++){sum+=i;}
            console.log(new Date().getTime())
            return sum  + this.j;
        }
    },
    methods: {statusMethod(status) {return this.statusMap[status]
        },
        cliskC() {
            this.j++;
            this.s = this.sum;
        }
    },
    filters: {statusFilter(status) {
            let statusMap = {
                '1': '开始',
                '2': '进行中',
                '3': '完结'
            }
            return statusMap[status]
        }
    }
}

</script>