4vue过滤器

luyanran
189 阅读5分钟

vue 允许自定义过滤器

eg:时间过滤

两个地方用

  • 在插值表达式中使用
  • 在v-bind中使用

过滤器应该放置在js尾部，由管道符指示

            <!-- 时间需要过滤器 -->
            <!-- 过滤器格式 平时{{name}}  对name做处理 {{name|nameope}}-->
            <!-- 定义过滤器  Vue.filter('过滤器名称',function(){}) -->
            <!-- function 的第一个参数被规定死了。永远都是管道符前面传递回来的数据 -->
            <!--  Vue.filter('过滤器名称',function(data){}) -->

正则表达式替换固定的值

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <script src="./lib/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
    
            <p>{{msg|msgFormat}}</p>
    
        </div>
        <script>
            // 定义一个全局过滤器
            Vue.filter('msgFormat', function (msg) {
                // 只替换第一个 直接return
                // return  msg.replace('单纯','邪恶')
                // 正则，replace第一个参数除了字符串还可以是正则，g全局匹配
                // 替换全局
                // return msg.replace(/单纯/g, '邪恶')
            })
            var vm = new Vue({
                el: "#app",
                data: {
                    msg: '曾经我也是个单纯的少年，单纯的我，傻傻的问，这个世界谁是最单纯的'
                },
                methods: {
                }
            })
        </script>
    </body>
    
    </html>

传递参数替换非固定的值

  • 想替换成啥就是啥，传递参数（'字符串'）

  • 第一个位置占用了，从第二个开始

  • 过滤器可以传递多个参数，用逗号隔开字符串，问题直接显示时用+

  • 可不可以多次调用过滤器,先把原始值给第一个值过滤器使用，之后在把得到的值给第二个过滤器使用.... 

         <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
         <link rel="stylesheet" href="./css/bootstrap.min.css">
         <script src="./lib/vue.js"></script>
     </head>
     
     <body>
         <div id="app">
     
             <p>{{msg|msgFormat('疯狂+1','123')|test}}</p>
     
         </div>
         <script>
             // 定义一个全局过滤器
             Vue.filter('msgFormat', function (msg,arg,arg2) {
                 // 想替换成啥就是啥，传递参数（'字符串'）
                 // 第一个位置占用了，从第二个开始
                 // 过滤器可以传递多个参数，用逗号隔开字符串，问题直接显示时用+
                 // 可不可以多次调用过滤器
                 return msg.replace(/单纯/g, arg+arg2)
             })
             Vue.filter('test',function(msg){
                 return msg+"===="
             })
             var vm = new Vue({
                 el: "#app",
                 data: {
                     msg: '曾经我也是个单纯的少年，单纯的我，傻傻的问，这个世界谁是最单纯的'
                 },
                 methods: {
                 }
             })
         </script>
     </body>
     
     </html>

一对一的关系el绑定的不能显示1对多的关系,多个对象，多个绑定el，

全局过滤器 的调用只要是多对多的绑定，无论局部过滤器

        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>时间过滤器</title>
            <link rel="stylesheet" href="./css/bootstrap.min.css">
            <script src="./lib/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">添加品牌</h3>
                    </div>
                    <div class="panel-body form-inline">
                        <label for="">Id
                            <input type="text" name="" id="" v-model="id" class="form-control">
                        </label>
                        <label for="">Name
                            <input type="text" name="" id="" v-model="name" class="form-control">
                        </label>
                        <label for="">
                            <input type="button" value="添加" name="" id="" class="btn btn-primary" @click="add">
                        </label>
                        <label for="">搜索名称关键字
                            <input type="text" name="" id="" v-model="keywords" class="form-control">
                        </label>
                    </div>
                </div>
        
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </thead>
                    <tbody>
                        <tr v-for="item in search(keywords)" :key="item.id">
                            <td>{{item.id}}</td>
                            <td v-text="item.name"></td>
                            <td>{{item.ctime|dateFormat()}}</td>
                            <td><a href="" @click.prevent='dele(item.id)'>删除</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="app2">
                <h2>{{1+2}}</h2>
                <p>{{dt|dateFormat}}</p>
            </div>
            <script>
                // 过滤器 start
                //时间过滤器,全局，时间事件格式化
                Vue.filter('dateFormat', function (dataStr,pattern='') {
                    // 根据给定的字符串dataStr，得到特定的时间
                    // yyyy-mm-dd   拼接
                    var dt = new Date(dataStr)
                    var y = dt.getFullYear()
                    var m = dt.getMonth() + 1
                    var d = dt.getDate()
                    //连接
                    // return y+'-'+m+'-'+d
                    //模板字符串
                    // return `yyyy-mm-dd`
                   
                    // 先变小写
                    if(pattern.toLowerCase()=='yyyy-mmm-dd'){
                        return `${y}-${m}-${d}`
                    }else{
                        var hh = dt.getHours()
                        var mm = dt.getMinutes()
                        var ss = dt.getSeconds()
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                    }
                })
                // 过滤器 end
                var vm = new Vue({
                    el: "#app",
                    data: {
                        id: '',
                        name: '',
                        keywords: '',
                        list: [
                            { id: 1, name: '奔驰', ctime: new Date() },
                            { id: 2, name: '宝马', ctime: new Date() },
                            { id: 3, name: '路虎', ctime: new Date() }
                        ]
                    },
                    methods: {
                        add() {
                            // 拼接对象
                            var car = { id: this.id, name: this.name, ctime: new Date() }
                            //  push对象
                            this.list.push(car)
                            this.id = this.name = ''
                        },
                        dele(id) {
                            // 根据id找到删除对象的索引  some根据指定的条件判断不知道什么时候能找到，随时可以终止
                            this.list.some((item, i) => {
                                if (item.id === id) {
                                    // 找到索引后删除，直接调用数组的splice方法
                                    this.list.splice(i, 1)
                                    // 在some方法中return true ,就会立即终止这个数组的后续循环
                                    return true
                                }
                            })
                        },
                        search(keywords) {
                            ////1.2includes
                            var newList = this.list.filter(item => {
                                // es6中为字符串提供新的方法，string.prototype.includes('要包含的字符串')，包含返回true不包含返回false
                                // contains选取包含指定字符串的数据
                                if (item.name.includes(keywords)) {
                                    return item
                                }
                            })
                            return newList
                        }
                    }
                })
                var vm1 =new Vue({
               el:'#app2',
               data:{
                   dt:new Date()
               }
           })
            </script>
        </body>
        
        </html>

定义私有过滤器 filters 是对象，过滤器的两个条件过滤器名称和处理函数

  • 过滤器调用采用就近原则，如果私有过滤器和全局过滤器名称一样了，优先调用私有过滤器

       filters:{ dateFormat: function (dataStr,pattern='') {·····} }

  • 私有过滤器的使用

      <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>时间过滤器</title>
      <link rel="stylesheet" href="./css/bootstrap.min.css">
      <script src="./lib/vue.js"></script>
  </head>
  <body>
      <div id="app">
          <div class="panel panel-primary">
              <div class="panel-heading">
                  <h3 class="panel-title">添加品牌</h3>
              </div>
              <div class="panel-body form-inline">
                  <label for="">Id
                      <input type="text" name="" id="" v-model="id" class="form-control">
                  </label>
                  <label for="">Name
                      <input type="text" name="" id="" v-model="name" class="form-control">
                  </label>
                  <label for="">
                      <input type="button" value="添加" name="" id="" class="btn btn-primary" @click="add">
                  </label>
                  <label for="">搜索名称关键字
                      <input type="text" name="" id="" v-model="keywords" class="form-control">
                  </label>
              </div>
          </div>
  
          <table class="table table-bordered table-hover table-striped">
              <thead>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Ctime</th>
                  <th>Operation</th>
              </thead>
              <tbody>
                  <tr v-for="item in search(keywords)" :key="item.id">
                      <td>{{item.id}}</td>
                      <td v-text="item.name"></td>
                      <td>{{item.ctime|dateFormat()}}</td>
                      <td><a href="" @click.prevent='dele(item.id)'>删除</a></td>
                  </tr>
              </tbody>
          </table>
      </div>
      <div id="app2">
          <h2>{{1+2}}</h2>
          <p>{{dt|dateFormat}}</p>
      </div>
      <script>
          // 过滤器 start
          //时间过滤器,全局，时间事件格式化
          Vue.filter('dateFormat', function (dataStr,pattern='') {
              // 根据给定的字符串dataStr，得到特定的时间
              // yyyy-mm-dd   拼接
              var dt = new Date(dataStr)
              var y = dt.getFullYear()
              var m = dt.getMonth() + 1
              var d = dt.getDate()
              //连接
              // return y+'-'+m+'-'+d
              //模板字符串
              // return `yyyy-mm-dd`
             
              // 先变小写
              if(pattern.toLowerCase()=='yyyy-mmm-dd'){
                  return `${y}-${m}-${d}`
              }else{
                  var hh = dt.getHours()
                  var mm = dt.getMinutes()
                  var ss = dt.getSeconds()
                  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
              }
          })
          // 过滤器 end
          var vm = new Vue({
              el: "#app",
              data: {
                  id: '',
                  name: '',
                  keywords: '',
                  list: [
                      { id: 1, name: '奔驰', ctime: new Date() },
                      { id: 2, name: '宝马', ctime: new Date() },
                      { id: 3, name: '路虎', ctime: new Date() }
                  ]
              },
              methods: {
                  add() {
                      // 拼接对象
                      var car = { id: this.id, name: this.name, ctime: new Date() }
                      //  push对象
                      this.list.push(car)
                      this.id = this.name = ''
                  },
                  dele(id) {
                      // 根据id找到删除对象的索引  some根据指定的条件判断不知道什么时候能找到，随时可以终止
                      this.list.some((item, i) => {
                          if (item.id === id) {
                              // 找到索引后删除，直接调用数组的splice方法
                              this.list.splice(i, 1)
                              // 在some方法中return true ,就会立即终止这个数组的后续循环
                              return true
                          }
                      })
                  },
                  search(keywords) {
                      ////1.2includes
                      var newList = this.list.filter(item => {
                          // es6中为字符串提供新的方法，string.prototype.includes('要包含的字符串')，包含返回true不包含返回false
                          // contains选取包含指定字符串的数据
                          if (item.name.includes(keywords)) {
                              return item
                          }
                      })
                      return newList
                  }
              }
          })
          var vm1 =new Vue({
         el:'#app2',
         data:{
             dt:new Date()
         },
         filters:{
          //    过滤器调用采用就近原则，如果私有过滤器和全局过滤器名称一样了，优先调用私有过滤器
             dateFormat: function (dataStr,pattern='') {
              var dt = new Date(dataStr)
              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-mmm-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}~~~~`
              }
          }
         }
     })
      </script>
  </body>
  
  </html>
avatar
文章
阅读
粉丝