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>
  • 相关阅读:
    LRU(Least Recently Used最近最少使用)的c++实现(顺序表)
    linux下的性能分析profiling(动态)
    实习的具体内容
    x86_64 Ubuntu 14.04 LST安装gcc4.1.2 转载
    Gem5全系统模式下运行SPLASH-2 Benchmarks使用alpha ISA
    gem5 运行x86全系统仿真
    Linux操作系统下三种配置环境变量的方法——转载
    找实习小结
    multi2sim,booksim简介
    破壳(2)之触摸
  • 原文地址:https://www.cnblogs.com/lujieting/p/10447877.html
Copyright © 2011-2022 走看看