computed

最新推荐文章于 2024-09-25 17:15:35 发布

xiaozhang21

最新推荐文章于 2024-09-25 17:15:35 发布

阅读量70

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/ztc213421/article/details/133912598

版权

computed

计算属性

当函数表达式比较长的时候或者比较复杂时候我们可以使用computed计算属性

步骤：

1 首先在computed计算属性中自定义方法名

computed: {

自定义方法名() {

return 代码块

}

2 将自定义方法名直接当作data来使用

watch

能够监听数据改变

filter

过滤器

如果有些时候我们需要给数据进行特定方式绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
  
    <div id="app">
        {{msg.split("").reverse().join("")}}
        {{reverseMsg}}
        <ul>
            <li v-for="(stu, index) in stus" :key="index">{{stu.name}}--{{stu.time | filterTime}}</li>
        </ul>

        <ul>
            <li v-for="(stu, index) in updateTime" :key="index">{{stu.name}}--{{stu.time}}</li>
        </ul>
        <ul>
            <li v-for="(stu, index) in filterStus" :key="index">{{stu}}</li>
        </ul>
    </div>
</body>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: 'hello',
            stus: [
                {
                    id: 1,
                    name: '张三',
                    age: 15,
                    time: '2023-10-07T08:16:58.679Z'
                },
                {
                    id: 2,
                    name: '赵四',
                    age: 18,
                    time: '2023-05-05T13:07:12.548Z'
                }
            ]
        },
        computed: {
            reverseMsg() {
                return this.msg.split("").reverse().join("")
            },
            filterStus() {
                return this.stus.filter(item => item.age > 15)
            },
            updateTime() {
                return this.stus.map(item => {
                    return {
                        name: item.name,
                        time: (new Date().getTime() - new
                            Date(item.time).getTime()) / 1000 < 60 ? Math.floor((new Date().getTime() - new
                                Date(item.time).getTime()) / 1000) + '秒前' : Math.floor((new Date().getTime() - new
                                    Date(item.time).getTime()) / 1000 / 60) < 60 ? Math.floor((new Date().getTime() - new
                                        Date(item.time).getTime()) / 1000 / 60) + '分前' : Math.floor((new Date().getTime() - new
                                            Date(item.time).getTime()) / 1000 / 60 / 60) < 24 ? Math.floor((new Date().getTime() - new
                                                Date(item.time).getTime()) / 1000 / 60 / 60) + '小时前' : Math.floor((new Date().getTime() - new
                                                    Date(item.time).getTime()) / 1000 / 60 / 60 / 24) < 30 ? Math.floor((new Date().getTime() - new
                                                        Date(item.time).getTime()) / 1000 / 60 / 60 / 24) + '天前' : Math.floor((new Date().getTime() - new
                                                            Date(item.time).getTime()) / 1000 / 60 / 60 / 24 / 30) < 12 ? Math.floor((new Date().getTime() - new
                                                                Date(item.time).getTime()) / 1000 / 60 / 60 / 24 / 30) + '月前' : '年-月-日'
                    }
                })
            }
        },
        filters: {
            filterTime(value) {
                return (new Date().getTime() - new
                    Date(value).getTime()) / 1000 < 60 ? Math.floor((new Date().getTime() - new
                        Date(value).getTime()) / 1000) + '秒前' : Math.floor((new Date().getTime() - new
                            Date(value).getTime()) / 1000 / 60) < 60 ? Math.floor((new Date().getTime() - new
                                Date(value).getTime()) / 1000 / 60) + '分前' : Math.floor((new Date().getTime() - new
                                    Date(value).getTime()) / 1000 / 60 / 60) < 24 ? Math.floor((new Date().getTime() - new
                                        Date(value).getTime()) / 1000 / 60 / 60) + '小时前' : Math.floor((new Date().getTime() - new
                                            Date(value).getTime()) / 1000 / 60 / 60 / 24) < 30 ? Math.floor((new Date().getTime() - new
                                                Date(value).getTime()) / 1000 / 60 / 60 / 24) + '天前' : Math.floor((new Date().getTime() - new
                                                    Date(value).getTime()) / 1000 / 60 / 60 / 24 / 30) < 12 ? Math.floor((new Date().getTime() - new
                                                        Date(value).getTime()) / 1000 / 60 / 60 / 24 / 30) + '月前' : '年-月-日'
            }
        }
    })
</script>

</html>