尚硅谷Vue学习——过滤器

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

过滤器filters dayjs

打开边栏(ESC) 关闭边栏(ESC)

格式化时间js插件：dayjs.js
在线cdn查找：https://www.bootcdn.cn/dayjs/
github仓库及使用说明：https://github.com/iamkun/dayjs.git

定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。

语法：
注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}}
使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
过滤器也可以接收额外参数，多个过滤器能够串联。

并没有改变原本的数据，是产生新的对应的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>(计算属性实现)现在是{{fmtTime}}</h3>
        <!-- methods实现 -->
        <h3>(methods实现)现在是{{getfmtTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>(过滤器实现)现在是{{time | timeFormater}}</h3>
        <!-- 过滤器传参 -->
        <h3>(过滤器传参)现在的日期是{{time | timeFormater('YYYY年_MM月_DD日')}}</h3>
         <!-- 多个过滤器传参 -->
         <h3>(多个过滤器传参)今年是{{time | timeFormater('YYYY年_MM月_DD日') | mySlice}}</h3>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip =  false // 阻止 vue 在启动时生成生产提示
    // 全局过滤器
    Vue.filter('mySlice',function(value){
        return value.slice(0,5)
    })
 
    new Vue({
        el:'#root',
        data:{
            name:'才疏学浅的小缘同学',
            time: 1647417712099 
        },
        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(str)
            },
        }
    })
</script>
</html>