Vue学习笔记02day_03.过滤器的基本使用

- 日理万妓 2022-05-13 09:08 210阅读 0赞

<!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>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
        <p>{
       { msg | msgFormat('疯狂+1', '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 + '========'
        })
    
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 Mybatis学习笔记——day03

文章目录 Mybatis 5、解决属性名和字段名不一致的问题 1、问题 2、resultMap

谁借莪１个温暖的怀抱￠/ 2022年12月30日 08:16/ 0 赞/ 225 阅读

相关 Oracle学习笔记--day03

oracle的scott用户的表的结构： dept 部门表： DEPTNO NUMBER(2) pk 表示部门编号，由两位数字所组成 DNAME VARCHAR

Bertha 。/ 2022年06月17日 14:13/ 0 赞/ 328 阅读

相关 Vue学习笔记03day_02动画-不使用动画（显示和隐藏）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

水深无声/ 2022年05月13日 09:46/ 0 赞/ 243 阅读

相关 Vue学习笔记02day_05.vue-resource的基本使用get/post/jsonp

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

超、凢脫俗/ 2022年05月13日 09:44/ 0 赞/ 209 阅读

相关 Vue学习笔记02day_04.生命周期函数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

心已赠人/ 2022年05月13日 09:44/ 0 赞/ 197 阅读

相关 Vue学习笔记02day_03.过滤器的基本使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

- 日理万妓/ 2022年05月13日 09:08/ 0 赞/ 211 阅读

相关 Vue学习笔记02day_02.品牌列表案例02_自定义全局时间过滤器+自定义样式指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

比眉伴天荒/ 2022年05月13日 09:08/ 0 赞/ 197 阅读

相关 Vue学习笔记01day_02.v-cloak、v-text、v-html的基本使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

不念不忘少年蓝@/ 2022年05月13日 05:28/ 0 赞/ 213 阅读

相关 hibernate学习笔记（day03）

文章目录 hibernate学习流程 1. 一对多|多对一 1.1关系表达 1.2操作关联属性

蔚落/ 2021年12月17日 01:19/ 0 赞/ 388 阅读

相关 Spring 学习笔记（day03）

文章目录 spring\_day03 1 spring整合JDBC 1.1 spring提供了很多模板整合Dao技术

叁歲伎倆/ 2021年12月09日 02:34/ 0 赞/ 434 阅读