第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用

￡神魔★判官ぃ 2021-11-04 11:38 373阅读 0赞

![1105922-20190608132259151-1036018630.png][]

<!DOCTYPE html>
    <html lang="en">
    
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
        
        <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
      </head>
    
      <body>
          <div id="app">
          <p>{
        { msg|msgFormat('疯狂','233') | test }}</p>
          </div>
        
    
          <script>
          //定义一个Vue全局的过滤器，名字叫做 msgFormat
          Vue.filter('msgFormat',function(msg,arg,arg2){
            //字符串的 repla方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则
           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>

转载于:https://www.cnblogs.com/songsongblue/p/10990553.html

[1105922-20190608132259151-1036018630.png]: /images/20211104/9a54fd360e2945f8ab4a799bffef1717.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue---过滤器---普通过滤器使用、串联过滤器、局部与全局过滤器

过滤器：定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）语法： 1.注册过滤器：Vue.filter(name,callback) 或 new

ゞ浴缸里的玫瑰/ 2024年04月07日 12:53/ 0 赞/ 154 阅读

相关 Vue过滤器的基本使用

过滤器功能：对要显示的数据进行特定格式化后再显示注意：并没有改变原本的数据，是产生新的对应的数据声明：过滤器不是必须要用到的东西，而是vue提供处理数据的方式而

雨点打透心脏的1/2处/ 2023年09月26日 22:32/ 0 赞/ 96 阅读

相关 VUE_vue如何定义全局过滤器

一、 main.js中定义全局过滤器 nameFiltes：过滤器名称，值为一个方法 Vue.filter('nameFiltes',function(data

布满荆棘的人生/ 2023年02月23日 12:12/ 0 赞/ 61 阅读

相关 Vue 过滤器案例（全局过滤器和局部过滤器）

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

「爱情、让人受尽委屈。」/ 2023年02月22日 05:15/ 0 赞/ 71 阅读

相关 Vue 中全局过滤器的使用

首先需要在 main.js 中注册过滤器： import filter from './filter/filter' // 全局过滤器 Ob

深藏阁楼爱情的钟/ 2022年12月14日 13:37/ 0 赞/ 281 阅读

相关 vue 过滤器的基本使用

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

Dear 丶/ 2022年02月21日 09:43/ 0 赞/ 354 阅读

相关 Vue引入全局过滤器

创建单独的文件 ![在这里插入图片描述][20190516162536954.png] 加上时间过滤函数将formatDate 暴露export 出来

喜欢ヅ旅行/ 2022年01月31日 11:55/ 0 赞/ 389 阅读

相关 vue_全局注册过滤器

在一个项目中, 某些过滤器全局都有可能用的到, 统一管理并自动化全局注册是很方便的. 代码如下, 后续只需要在src/filters/index.js中添加方法就可以全局使用

向右看齐/ 2021年12月14日 10:43/ 0 赞/ 657 阅读

相关第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta c

- 日理万妓/ 2021年11月04日 11:38/ 0 赞/ 352 阅读

相关第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用

![1105922-20190608132259151-1036018630.png][] <!DOCTYPE html> <html lang="en">

￡神魔★判官ぃ/ 2021年11月04日 11:38/ 0 赞/ 374 阅读