fliter的两种使用方法

最新推荐文章于 2024-01-24 15:53:09 发布

_Lilly

最新推荐文章于 2024-01-24 15:53:09 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： Vue filter

本文链接：https://blog.csdn.net/qq_37331119/article/details/78181234

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

单个fliter

参考官方链接

在HTML中

<div>
    <p>{{message|my-filter}}</p>   //前者为需要过滤的内容，后者为过滤器名
</div>

首先我们需要注册一个过滤器，下面的过滤器是一个全局过滤器

// 注册
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
  return //过滤后的值
})

当然我们需要在Vue实例中给message赋一个值
获取已注册过滤器


// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

多个fliter

首先我们需要新建一个类，用于存储多个filter,其实这种过滤器方法感觉是自己写了一个过滤器，而没有用到Vue当中的函数

var filter = {
    add: function(value){   //value用来接受需要处理的对象
        return value+"+"
    },
    minus: function(value){
        return value+"-"
    }
}

那我们怎么用这个filter呢？

在HTML中，

<div id="app">
    <P>{{newMsg}}</P>
</div>

在Vue实例中：

var vm = new Vue({
    el:'#app',
    data: {
        message: 'test',
        msg: "方法为"
    },
    computed: {
        newMsg: function () {
            return filters.add(this.msg)
        }
    }
})

测试完整代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试过滤器</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <p id="filter1"></p>
    <p id="filter2"></p>
    <p id="filter3"></p>

        <div id="app">
            <p>{{message|uppercase}}</p>
            <P>{{newMsg}}</P>
        </div>

    <script type="text/javascript">
        //过滤器
        Vue.filter('uppercase', function(value) {
          if (!value) { return ''}
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        })

        var filters = {
            add: function(value){
                return value+"+"
            },
            minus: function(value){
                return value+"-"
            }
        }

        var vm = new Vue({
          el:'#app',
          data: {
            message: 'test',
            msg: "方法为"
          },
          computed: {
            newMsg: function () {
              return filters.add(this.msg)
            }
          }
        })

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