VUE中 filterscomputedmethodswatch用法

Posted 2021-09-07 qqcc

过滤器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>