Vue 过滤器-CFANZ编程社区

Vue 过滤器

文章目录

使用 dayjs
过滤器

使用 dayjs

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目，我们在页面搜索 day.js，复制链接，在浏览器打开，右键另存为下载下来，放到项目中
Vue 过滤器_数据
我们还可以在页面打开 github 查看用法
Vue 过滤器_数据_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初识</title>
    <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>现在时间是：{{fmtTime}}</h2>
    <!--methods实现-->
    <h2>现在时间是：{{getFmtTime()}}</h2>
    <!--过滤器实现(传参)-->
    <h2>现在时间是：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice}}</h2>
</div>
<div id="root2">
    <h2>{{msg | mySlice}}</h2>
    <h2 :x="msg | mySlice">Hello world</h2>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    //全局过滤器
    Vue.filter('mySlice',function (value) {
        return value.slice(0,5)
    })
    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            time:1648430790000
        },
        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)
            }
        }
    })

    new Vue({
        el: "#root2",
        data: {
            msg:"hello world"
        }
    })
</script>
</body>
</html>

Vue 过滤器_html_03

过滤器

过滤器
定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理）
语法：
1.注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}} 2.使用过滤器：{{ xxx│过滤器名}}或v-bind:属性= “xxx│过滤器名" 备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据

0 条评论