14.过滤器

 <div id="root">
    <h1>显示格式化后的时间</h1>
    <!-- 技术属性实现 -->
    <h2>现在时间：{{fmtTime}}</h2>

    <!-- methods实现 -->
    <h2>现在时间：{{getFmtTime()}}</h2>

    <!-- 过滤器实现 -->
    <h2>现在时间：{{time | timeFormater}}</h2>

    <!-- 过滤器实现（传参） -->
    <h2>现在时间：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h2>

    <h2 :x="name | mySlice">掘金</h2>
    <!-- <input type="text" v-model="name | mySlice"> --><!-- 报错 -->

</div>

<!-- 全局过滤器 -->
<div id="root2">
    <h2>{{name | mySlice}}</h2>
</div>
<script>
    Vue.filter('mySlice', function (value) {
        return value.slice(0, 4)
    })


    new Vue({
        el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: {//data用于储存数据，数据供el指定的容器使用，值我们先暂时写成一个对象
            time: 1689232574156,//时间戳
            name: 'nihao 掘金'

        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
            }
        },
        methods: {
            getFmtTime() {
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
            }
        },
        filters: {
            timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
                // console.log('@', value)
                return dayjs(value).format(str);
            },
            // 局部过滤器
            // mySlice(value) {
            //     return value.slice(0, 4)
            // }
        },

    })

    new Vue({
        el: '#root2',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: {//data用于储存数据，数据供el指定的容器使用，值我们先暂时写成一个对象
            name: 'world'

        }
    })


</script>