master

分支 (1)

管理

管理

master

vue2_test
/
vue2_nocli
/
ch12.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/dayjs.js"></script>
</head>
<body>
<a href="index.html">返回</a>
<div class="app">
    <h2>过滤器</h2>
    使用Date.now()
    得到当前时间戳：
    <ul>
        <li>{{time | myslice }}</li>
        <li>{{fmttime}}</li>
        <li>{{showtime()}}</li>
        <li>{{time | ftime('YYYY-MM-DD') | cut}}</li>
    </ul>
</div>
<script>
    Vue.config.productionTip=false  //关闭生产状态提示
    //全局过滤 器
    Vue.filter('myslice',function(value){
        value=""+value;
        return value.slice(0,5)
    })
    const x=new Vue({
        // el:".app",
        data:function (){  //data的第二种写法
            return{
                time:1636454405559
            }
        },
        methods:{
            showtime(){
                return dayjs(this.time).format("YYYY-MM-DD hh:mm:ss ")
            }
        },
        computed:{
            fmttime(){
                return dayjs(this.time).format("YYYY-MM-DD hh:mm:ss ")
            }
        },
        filters:{
            ftime(value,str='YYYY-MM-DD hh:mm:ss '){
                return dayjs(value).format(str)
            },
            cut(value){
                return value.slice(0,4)
            }
        }
    })
        x.$mount(".app")//挂载方式
</script>
</body>
</html>