Vue过滤器（尚硅谷笔记）

最新推荐文章于 2024-07-24 11:11:41 发布

m0_48283799

最新推荐文章于 2024-07-24 11:11:41 发布

阅读量101

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_48283799/article/details/124637516

版权

<body>
    <!-- 
        过滤器：
           定义：对要显示的数据进行特定格式化再显示（适用于一些简单逻辑的处理
           语法：
               1、注册过滤器： Vue.filter(name, callback)(全局过滤器) 或 new Vue{filters:{}}
               2、使用过滤器：{{xxx | 过滤器名}}  或 v-bind:属性 = "xxx | 过滤器名"
           备注：
               1、过滤器也可以接收额外参数、多个过滤器也可以串联
               2、并没有改变原本的数据，是产生新的对应的数据
            -->
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>现在是：{{fmttime}}</h3>
        <!-- methods方法实现 -->
        <h3>现在是：{{getFmttime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是：{{time | timeFormater}}</h3>
        <!-- 过滤器实现（传参） -->
        <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
        <h3 :x="msg | mySlice">我是天空</h3>
    </div>
    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;  // 设置为 false 以阻止 vue 在启动时生成生产提示。
        // 全局过滤器
        Vue.filter('mySlice', function(value){
            return value.slice(0,4)
        });
        new Vue({
            el: '#root',
            data: {
                time: 1651919226664,
                msg: '大家好我是天空'
            },
            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') {
                    // return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')                   
                    return dayjs(value).format(str)
                },
               /*  mySlice(value) {
                    return value.slice(0,4)
                } */
            }
        })
        new Vue({
            el: '#root2',
            data: {
                msg: '大家好我是天空'
            }
        })
    </script>
</body>

m0_48283799

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue过滤器（尚硅谷笔记）

<body> <!-- 过滤器：定义：对要显示的数据进行特定格式化再显示（适用于一些简单逻辑的处理语法： 1、注册过滤器： Vue.filter(name, callback)(全局过滤器) 或 new Vue{filters:{}} 2、使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名" .
复制链接

扫一扫