vue自带过滤器

最新推荐文章于 2023-07-05 14:29:57 发布
最新推荐文章于 2023-07-05 14:29:57 发布
阅读量281 收藏 1
点赞数
分类专栏： vue 文章标签： filter

一 过滤器写法

{{ message | Filter}}

 

二 Vue自带的过滤器:capitalize

功能:首字母大写

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            {{message | capitalize}}
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message: "abc"
                }
            })
        </script>
    </body>
</html>
复制代码

上面代码输出:Abc

 

三 Vue自带的过滤器:uppercase

功能:全部大写

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            {{message | uppercase}}
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message: "abc"
                }
            })
        </script>
    </body>
</html>
复制代码

上面代码输出:ABC

 

四 Vue自带的过滤器:uppercase

功能:全部小写

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            {{message | lowercase}}
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message: "ABC"
                }
            })
        </script>
    </body>
</html>
复制代码

上面代码输出:abc

 

五 Vue自带的过滤器:currency

功能:输出金钱以及小数点

参数:

第一个参数     {String} [货币符号] - 默认值: '$'

第二个参数     {Number} [小数位] - 默认值: 2

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            {{message | currency}} <!--输出$123.47-->
            {{message | currency '¥' "1"}} <!--输出$123.5-->
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message: "123.4673"
                }
            })
        </script>
    </body>
</html>
复制代码

 

六 Vue自带的过滤器:pluralize

功能: 如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。

参数：{String} single, [double, triple, ...

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
        {{message}}    {{message | pluralize 'item'}} <!--输出: 1 item-->
        
            <ul v-for="item in lili">
                <li>
                    {{item}}    {{item | pluralize 'item'}} <!--输出: 1    item 2    items 3    items-->
                </li>
            </ul>
            
            <ul v-for="item in lili">
                <li>
                    {{item}}    {{item | pluralize 'st' 'rd'}} <!--输出: 1    st 2    rd 3    rd-->
                </li>
            </ul>
            
            <ul v-for="item in man">
                <li>
                    {{item}}    {{item | pluralize 'item'}} <!--输出: 1    item 2    items 3    items-->
                </li>
            </ul>
            
            <ul v-for="item in man">
                <li>
                    {{item}}    {{item | pluralize 'st' 'rd'}} <!--输出: 1    st 2    rd 3    rd-->
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message: 1,
                    lili: [1,2,3],
                    man: {
                        name1: 1,
                        name2: 2,
                        name3: 3
                    }
                }
            })
        </script>
    </body>
</html>
复制代码

 

七 Vue自带的过滤器:debounce

(1)限制： 需在@里面使用

(2)参数:{Number} [wait] - 默认值： 300

(3)功能：包装处理器，让它延迟执行 x ms， 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms， 如果在延迟结束前再次调用，延迟时长重置为 x ms。

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <button id="btn" @click="disappear | debounce 10000">点击我,我将10秒后消失</button>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                methods: {
                    disappear: function () {
                        document.getElementById("btn").style.display= "none";
                    }
                }
            })
        </script>
    </body>
</html>
复制代码

 

八 Vue自带的过滤器:limitBy

(1)限制:需在v-for(即数组)里面使用

(2)两个参数:

第一个参数:{Number} 取得数量

第二个参数:{Number} 偏移量

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <ul v-for="item in lili | limitBy 10"> <!--输出1 2 3 4 5 6 7 8 9 10-->
                <li>{{item}}</li>
            </ul>
            <ul v-for="item in lili | limitBy 10 3"> <!--输出 4 5 6 7 8 9 10 11 12 13-->
                <li>{{item}}</li>
            </ul>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    lili: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
                }
            })
        </script>
    </body>
</html>
不停的奋斗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue filter 过滤器
本杰明的博客
07-17 3180
在项目开发中，我们常常需要把一些常见的文本格式化，比如说后端返回手机号需要加星号处理，或者说把一些数字加上货币单位如果说我们把这些操作在methods选项中注册为一个方法的话，虽然也是一种可行的方法，但是其缺点也很明显：methods选项常常被用来组织页面数据和交互逻辑，简单的文本处理杂糅其中语义化不明显且methods过重首先要注意几点： 1. vue1中的uppercase等vue自带过滤器
vue过滤器
alreadyRAY的博客
06-10 185
过滤器 概念 vue中的过滤器（filter）：数据格式化 让数据按照规定的一种格式进行输出 例如：将日期格式转化为年-月-日 小时：分：秒的过程 全局过滤器 和 局部过滤器 通过全局方式创建的过滤器在任何一个Vue实例中都可以使用（一般情况下，为了项目方便管理，都是一个vue实例） 注意：使用全局过滤器的时候，应该先创建全局过滤器再创建Vue实例 局部创建的过滤器 只能在当前vue实例中使...
vue 内置过滤器大全
weixin_34353714的博客
10-13 358
2019独角兽企业重金招聘Python工程师标准>>> ...
vue【过滤器】
最新发布
若有所执，必有所成，心之所向，必显光芒
07-05 5932
过滤器的基本语法，使用Vue.filter定义全局过滤器，使用过滤器格式化时间，过滤器的其他用法
Vue.js 中的过滤器是什么？如何使用过滤器？
徐师兄的博客
06-05 564
除了使用内置过滤器之外，我们还可以自定义过滤器，以便更好地满足具体业务需求。在 Vue.js 中，可以通过在组件中定义filters对象来自定义过滤器。filters对象中的每个属性都代表一个过滤器名称和对应的过滤器函数。下面是一个自定义过滤器的例子：return {if(!} , } , };} , } , };} , } , };} , } , };
Vue中过滤器用法详解
RayShyy的博客
10-24 9225
Vue.js官方文档说明：可被用于一些常见的文本格式化。个人理解就是把一些不需要的东西过滤掉，只是对数据进行加工处理然后返回处理后的数据，和计算属性很相似。过滤器的应用场景：平常在开发中，过滤器的应用场景有很多，比如单位转换、文本格式化、时间格式化之类的等。ps：在vue3.0中已废弃filter。
vue 过滤器filter（全面）
记录点滴
07-12 3万+
在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变） 补充： 过滤器分全局过滤器和局部过滤器，下边我着重说下全局过滤器，因为全局过滤器在项目中使用频率非常高！ 局部过滤器： 过滤器可以用在两个地方：双花括号插值 或 v-bind表达式。 eg：先来看看第一个小例子： <div id=...
Vue实现自带的过滤器实例
01-19
二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Vue自带的过滤器</title> <meta name=viewport content=...
vue自定义过滤器创建和使用方法详解
01-19
vue1.*版本是有内置的过滤器，但是在vue2.*所有的版本都已经没有自带的过滤器了。 1、过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 　new Vue({ 　filters:{ 　myCurrency:function(myInput){ 　return ...
iview的table组件自带的过滤器实现
10-16
本文将深入探讨如何在 Iview 的 Table 组件中使用自带的过滤器来实现数据筛选，以及如何解决在分页情况下实现筛选的问题。 1. **Ivew Table 的过滤器基础使用** 在 Ivew 的 Table 组件中，我们可以为列定义 `...
vue 内置过滤器的使用总结(附加自定义过滤器)
12-08
前言 vue中过滤器filters的作用是什么？ 过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，可以参考官方文档。 能够帮我们处理快速一些数据的格式—-format数据格式化处理。 语法也很简单 {{ message | Filter }} message: 要格式化的数据 Filter: 对数据格式化的方法 链式过滤 VueJs允许你链式调用过滤器，简单的来说，就是一个过滤器的输出成为下一个过滤器的输入，然后再次过滤。接下来，我们可以想象一个比较简答的例子，使用了Vue的 filterBy + orderBy 过滤器
详解Vue2.0里过滤器容易踩到的坑
11-27
vue2.0里，不再有自带的过滤器，需要自己定义过滤器。定义的方法如下： 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。 Vue.filter('filtername',function(value,参数){ return 参数+value....
vue 过滤器的使用详解
天命爱心职责的博客
03-24 7407
过滤器的功能是对要显示的数据进行格式化后再显示，其并没有改变原本的数据，只是产生新的对应的数据，本文通过多个案例对过滤器进行了详解。
Vue中的过滤器(filter)
热门推荐
weixin_66375317的博客
05-24 5万+
Vue中的过滤器(filter)
vue 过滤器基本用法
seven_an的博客
12-11 2万+
使用地点：双花括号插值和v-bind表达式。 {{ message|capitalize}} new Vue({ el:"#app", data:{ message:"pwd" }, filters:{ capitalize:function(value){ return value+'a' } } }) 注意：过滤器函数接收的第一个值是message，依次
Vue.js的内置过滤器
beyond丿灬的博客
09-18 479
在Vue.js 2.0的版本中已经废除了自带的过滤器,所以要使用过滤器只能自己写
Vue内置过滤器
Mi的博客
06-08 2925
1.capitalize：字符串首字符转大写 2.uppercase：字符串转大写 3.lowercase：字符串转小写 4.currency：将数字转化为货币符号，并且自动添加数字分节号 参数 {String}[货币符号], {Number}[小数位] {{amount | currency '$' 2}}...
vue实现货币过滤器
curry_zhao的博客
02-08 6830
自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。 所以要让组件的 v-model 生效，它必须： 接受一个 value 属性在有新的 value 时触发 input 事件 代码如下： HTML：   {{ message }}              Total: ${{ total }} J
VUE中常用的十大过滤器
流绪@微梦
10-10 878
在vue的学习过程中，我发现过滤器是一个很好用的工具，过滤器（Filters）来渲染数据是一种很有趣的方式。过滤器不能替代Vue中的methods、computed或者watch，不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。 在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用...
vue filter过滤器
05-10
Vue.js提供了过滤器（filter）功能，可以用来处理文本格式化、大小写转换、日期格式化等常见需求。 使用方法如下： 1.在Vue实例定义中声明过滤器： ``` filters: { capitalize: function(value) { if (!value) ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值