zoukankan      html  css  js  c++  java
  • 定义私有过滤器

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Title</title>
    <script src="js/vue-2.4.0.js"></script>
    </head>
    <body>
    <div id="app2">
    <h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
    </div>
    <script>
    // 如何自定义一个私有的过滤器(局部)
    var vm2 = new Vue({
    el: '#app2',
    data: {
    dt: new Date()
    },
    methods: {},
    filters: { // 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】
    // 过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器
    dateFormat: function (dateStr, pattern = '') {
    // 根据给定的时间字符串,得到特定的时间
    var dt = new Date(dateStr)

    // yyyy-mm-dd
    var y = dt.getFullYear()
    var m = (dt.getMonth() + 1).toString().padStart(2, '0')
    var d = dt.getDate().toString().padStart(2, '0')

    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
    return `${y}-${m}-${d}`
    } else {
    var hh = dt.getHours().toString().padStart(2, '0')
    var mm = dt.getMinutes().toString().padStart(2, '0')
    var ss = dt.getSeconds().toString().padStart(2, '0')

    return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
    }
    }
    },
    directives: { // 自定义私有指令
    'fontweight': { // 设置字体粗细的
    bind: function (el, binding) {
    el.style.fontWeight = binding.value
    }
    },
    'fontsize': function (el, binding) { // 注意:这个 function 等同于 把 代码写到了 bind 和 update 中去
    el.style.fontSize = parseInt(binding.value) + 'px'
    }
    }
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 454 四数相加 II
    Java实现 LeetCode 454 四数相加 II
    Java实现 LeetCode 454 四数相加 II
    FFmpeg解码H264及swscale缩放详解
    linux中cat more less head tail 命令区别
    C语言字符串操作总结大全(超详细)
    如何使用eclipse进行嵌入式Linux的开发
  • 原文地址:https://www.cnblogs.com/lujieting/p/10447877.html
Copyright © 2011-2022 走看看