• 过滤器


    <!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="app">
    <p>{{ msg| msgFormat('邪恶','123')|test }}</p>
    </div>


    <script>

    //定义一个 vue 全局的过滤器,名字叫做msgFormat
    Vue.filter('msgFormat', function (msg, arg, arg2) {
    //字符串的 replace 方法,第一个参数,除了可写一个 字符串 外,还可以定义一个 正则表达式
    return msg.replace(/单纯/g, arg + arg2)
    })
    Vue.filter('test', function (msg) {
    return msg + '==========='
    })

    const vm = new Vue({
    el: '#app',
    data: {
    msg: '曾经,我是一个单纯的少年,单纯的我,傻傻的问,谁是这个世界上最单纯的男人'
    },
    methods: {}
    })
    // 过滤器的定义语法
    // Vue.filter('过滤器的名称', function(){})

    // 过滤器中的 function ,第一个参数,已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据
    /* Vue.filter('过滤器的名称', function (data) {
    return data + '123'
    }) */

    </script>
    </body>
    </html>

    <!-- 过滤器调用时候的格式 {{ name | 过滤器的名称 }} -->
  • 相关阅读:
    SQL Server 之 内部连接
    SQL Server 之 子查询与嵌套查询
    ASP.NET MVC5高级编程 之 视图
    ASP.NET MVC5高级编程 之 路由
    jQuery返回顶部实用插件YesTop
    jQuery照片墙相册
    js功能实现的特效--距离新年还有多少天
    圣杯布局小结
    等高分栏布局小结
    jQuery设置内容和属性方
  • 原文地址:https://www.cnblogs.com/lujieting/p/10434794.html
Copyright © 2020-2023  润新知