Vue 过滤器

最新推荐文章于 2024-07-04 10:07:27 发布
最新推荐文章于 2024-07-04 10:07:27 发布
阅读量712 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H1069495874/article/details/55225433
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/vue1.0.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{}
            });
        }
    </script>
</head>
<body>
<div id="box">
    <!--大小写转换-->
    {{'welcome'|uppercase}}
    <hr>
    {{'WELCOME'|lowercase}}
    <hr>
    <!--首字母大写-->
    {{'welcome'|capitalize}}
    <hr>
    {{'WELCOME'|lowercase |capitalize}}
    <hr>
    <!--转换成美元-->
    {{12|currency}}
    <hr>
    <!--转换成人民币-->
    {{12|currency '￥'}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/vue1.0.js"></script>
    <script src="../js/vue-resource.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                data:{},
                methods:{
                    show:function(){
                        alert(111)
                    }
                }
            }).$mount('#box');
        }
    </script>
</head>
<body>
<div id="box">
    <!--debounce配合事件使用，延迟执行-->
    <input type="text" @keyup="show | debounce 2000">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/vue1.0.js"></script>
    <script src="../js/vue-resource.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                data:{
                    arr:[1,2,3,4,5,6],
                    arr2:["width","height","background","orange"],
                    arr3:["width","height","background","orange"],
                    b:''
                },
                methods:{
                }
            }).$mount('#box');
        }
    </script>
</head>
<body>
<div id="box">
    <ul>
        <!--val in arr | limitBy 2  从数组中取出前两位-->
        <li v-for="val in arr | limitBy 2">{{val}}</li>
        <hr>
        <!--val in arr | limitBy 1 2 从数组第二位开始取一位-->
        <li v-for="val in arr | limitBy 1 2">{{val}}</li>
        <hr>
        <!--val in arr2 | filterBy 'a' 取出数组中含有'a'的值-->
        <li v-for="val in arr2 | filterBy 'a'">{{val}}</li>
    </ul>

    <hr>

    <input type="text" v-model="b">
    <ul>
        <li v-for="val in arr3 | filterBy b">{{val}}</li>
    </ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/vue1.0.js"></script>
    <script src="../js/vue-resource.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                data:{
                    arr:["width","height","background","orange"],
                    a:''
                },
                methods:{
                }
            }).$mount('#box');
        }
    </script>
</head>
<body>
<div id="box">
    <ul>
        <!--val in arr | orderBy 1  1正序   -1倒序-->
        <li v-for="val in arr | orderBy 1">{{val}}</li>
        <hr>
    </ul>
    <hr>
    <ul>
        <li v-for="val in arr | orderBy -1">{{val}}</li>
        <hr>
    </ul>
    <hr>
    <input type="text" v-model="a">
    <ul>
        <li v-for="val in arr | orderBy a">{{val}}</li>
        <hr>
    </ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/vue1.0.js"></script>
    <script src="../js/vue-resource.js"></script>
    <script>
        //自定义过滤器
        Vue.filter('toDob',function(num){
            return num<10?'0'+num:num;
        });
        window.onload = function(){
            var vm = new Vue({
                data:{
                    a:'9'
                },
                methods:{
                }
            }).$mount('#box');
        }
    </script>
</head>
<body>
<div id="box">
    {{a | toDob}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/vue1.0.js"></script>
    <script src="../js/vue-resource.js"></script>
    <script>
        //自定义过滤器
        Vue.filter('change_time',function(num) {
            var oDate = new Date(num);
            return oDate.getFullYear() + '-' + oDate.getMonth() + '-' + oDate.getDate() + ' ' + oDate.getHours() + ':' + oDate.getMinutes() + ':' + oDate.getSeconds();
        });
        window.onload = function(){
            var vm = new Vue({
                data:{
                    a:Date.now()
                },
                methods:{
                }
            }).$mount('#box');
        }
    </script>
</head>
<body>
<div id="box">
    {{a | change_time}}
</div>
</body>
</html>
阁下长得好生俊俏
关注
专栏目录
vue 过滤器filter实例详解
10-18
Vue.js 的过滤器（Filter）是用于数据转换的一种强大工具，它允许我们在模板中对数据进行处理，以呈现更符合需求的显示效果。过滤器通常用于格式化数据，如日期格式化、字符串首字母大写等。Vue.js 提供了内置的过滤...
vue【过滤器】
日常学习总结
07-05 6124
过滤器的基本语法，使用Vue.filter定义全局过滤器，使用过滤器格式化时间，过滤器的其他用法
Vue中过滤器用法详解
RayShyy的博客
10-24 9263
Vue.js官方文档说明：可被用于一些常见的文本格式化。个人理解就是把一些不需要的东西过滤掉，只是对数据进行加工处理然后返回处理后的数据，和计算属性很相似。过滤器的应用场景：平常在开发中，过滤器的应用场景有很多，比如单位转换、文本格式化、时间格式化之类的等。ps：在vue3.0中已废弃filter。
Vue 过滤器（Filter）的理解与用法
最新发布
My_wife_QBL的博客
07-04 1416
过滤器是 Vue 提供的一种数据处理机制，它可以在模板中对数据进行格式化或转换。过滤器通常用于文本格式化，例如日期格式化、货币格式化、字符串截取等。全局过滤器可以在整个应用中使用，通过Vue.filter方法进行定义。if (!});Vue 过滤器是一个强大的工具，它允许我们在模板中对数据进行格式化处理。通过全局过滤器和局部过滤器的定义，我们可以在整个应用或特定组件中使用过滤器。过滤器支持参数传递和串联使用，使得数据处理更加灵活和强大。在使用过滤器时，我们应该保持简单、避免副作用，并合理使用第三方库。
vue基础-过滤器(Filters)
jewels_w的博客
07-01 8657
vue过滤器使用方法以及应用场景
Vue 过滤器详解
weixin_43749805的博客
06-14 2410
在 Vue.js 中，过滤器是一种非常有用的功能，它可以用于对数据进行格式化和处理，以便更好地展示给用户。过滤器提供了一种简单而灵活的方式来转换数据，并在模板中应用这些转换。本文将深入解析 Vue 的过滤器功能。
Vue过滤器
weixin_41549971的博客
06-27 1007
Vue 过滤器是一种全局可用的函数，它可以用于将模板中的数据进行格式化或转换。过滤器可以用于在显示数据之前对数据进行操作。它可以用于格式化日期、货币、大小写转换等。过滤器可以在模板中通过管道符号。在 Vue 中定义过滤器非常容易。你可以通过下面的代码片段来定义一个名为。该过滤器接收一个值作为参数，并将其转换为首字母大写的格式。变量的值作为输入，并返回经过处理后的结果。在这个例子中，我们使用 Vue 提供的。过滤器可以将其转换为。
Vue 过滤器filters及基本用法
08-28
Vue 过滤器filters及基本用法 Vue 过滤器是 Vue.js 框架中的一种功能强大的工具，能够对数据进行格式化和处理。下面，我们将介绍 Vue 过滤器的实例代码和基本用法。 what is Vue 过滤器？ Vue 过滤器是一种函数，...
vue过滤器用法实例分析
12-29
本文实例讲述了vue过滤器用法。分享给大家供大家参考，具体如下： 过滤器: vue提供过滤器: capitalize uppercase currency…. {{msg|currency ￥}} debounce 配合事件，延迟执行 <input type=text @...
vue的过滤器filter实例详解
12-09
排版记录，点耽误时间，我就简单的来，下面是一个vue 过滤器的写法，demo 演示，限制一个字符串的长度。 vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍： ...
如何换个角度使用VUE过滤器详解
01-19
过滤器在Vue中的主要用于文本格式化，如小写转大小，日期格式化等操作。官方对这个功能介绍也很简单，不过确实很简单，就一个函数而已。但最近在做两款APP时，遇到一些特殊的需求。然后就对vue中的filter一些用法...
vue过滤器实现日期格式化的案例分析
11-20
首先，让我们理解什么是Vue过滤器。Vue过滤器是一种特殊的函数，用于在模板中转换或处理数据。它们可以被插入到双大括号插值表达式或者v-bind指令中，通过管道符号（|）分隔数据和过滤器。例如：`{{ data | ...
Vue过滤器的用法和自定义过滤器使用
01-19
过滤器的结构为：Vue.filter(“id”,function(value,a){}); value是过滤器的一个参数，也是默认的原始值。a是自定义的一个参数。 自定义过滤器的例子： <!DOCTYPE html> <html> <head> <meta ...
详解vue过滤器在v2.0版本用法
12-28
1.x写法 <body> ... [removed] new Vue({ el:'#app', ...但是2.0中已经废弃了过滤器，需要我们自定义 {{message|uppercase}} //过滤器 Vue.filter('uppercase', function(value) { if (!value) {
Vue filter 过滤器、以及在table中的使用介绍
10-14
在Vue中，过滤器（Filters）是一种特殊的函数，主要用于一些文本格式化的任务。Vue 2.x版本中的过滤器可以用于插值表达式和v-bind表达式中，用于文本格式化。过滤器也可以用在组件内或全局定义。 一、过滤器的使用...
vue基础之模板和过滤器用法实例分析
10-17
本文主要聚焦于Vue模板和过滤器的基础知识，通过实例来展现它们的用法，并说明了在使用过程中的一些注意事项。接下来将详细介绍这两部分的知识。 首先，Vue模板是一种声明式描述，允许开发者使用简单的HTML标记来...
Vue中的过滤器（filter）
热门推荐
05-02 7万+
目录 过滤器使用位置 全局过滤器、局部过滤器 全局过滤器： 局部过滤器： 过滤器中传入多个参数： 多个过滤器串联： 官方文档：https://cn.vuejs.org/v2/guide/filters.html 在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变） 个人觉得称它为加工车间会更加贴切一些，过滤器可以用来筛选出符合条件的，丢弃不符合条件的；加工车间既可以筛选，又可以对筛选出来的进..
vue 过滤器filter（全面）
记录点滴
07-12 3万+
在官方文档中，是这样说明的：可被用于一些常见的文本格式化，vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变） 补充： 过滤器分全局过滤器和局部过滤器，下边我着重说下全局过滤器，因为全局过滤器在项目中使用频率非常高！ 局部过滤器： 过滤器可以用在两个地方：双花括号插值 或 v-bind表达式。 eg：先来看看第一个小例子： <div id=...
vue过滤器
05-30
Vue.js 的过滤器可以用来在模板中格式化显示数据。在模板中使用过滤器时，可以在要过滤的值后面加上“管道”符号（|），后面跟上过滤器名称，如下所示： ```html <!-- 在模板中使用过滤器 --> <p>{{ message | ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值