首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue实现自带的过滤器实例

Posted in Javascript onMarch 09, 2017

一 过滤器写法

{{ 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>

 九 Vue自带的过滤器:filterBy

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

(2)三个参数:

第一个参数: {String | Function} 需要搜索的字符串

第二个参数: in (可选,指定搜寻位置)

第三个参数: {String} (可选,数组格式)

<!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 | filterBy 'o' "> <!--输出oi oa lo ouo oala-->
        <li>{{item}}</li>
      </ul>
      
      <ul v-for="item in man | filterBy 'l' in 'name' "> <!--输出lily lucy-->
        <li>{{item.name}}</li>
      </ul>
      
      <ul v-for="item in man | filterBy 'l' in 'name' 'dada' "> <!--输出lily+undefined lucy+undefined undefined+lsh-->
        <li>{{item.name+"+"+item.dada}}</li>
      </ul>
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          lili: ["oi", "oa", "ll", "lo" ,"ouo" ,"kk" ,"oala"],
          man: [  //此处注意man是数组,不是对象
          {name: "lily"},
          {name: "lucy"},
          {name: "oo"},
          {dada: "lsh"},
          {dada: "ofg"}
          ]
        }
      })
    </script>
  </body>
</html>

十 Vue自带的过滤器:orderBy

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

(2)三个参数:

第一个参数: {String | Array<String> | Function} 需要搜索的字符串

第二个参数: {String} 可选参数 order 决定结果升序（order >= 0）或降序（order < 0）,默认是升序

<!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 | orderBy 'o' 1"> <!--输出kk ll oi-->
        <li>{{item}}</li>
      </ul>
      
      <ul v-for="item in lili | orderBy 'o' -1"> <!--输出oi ll kk-->
        <li>{{item}}</li>
      </ul>
      
      <!--遍历含对象的数组-->
      <ul v-for="item in man | orderBy 'name' 1"> <!--输出Bruce Chuck Jackie-->
        <li>{{item.name}}</li>
      </ul>
      
      <ul v-for="item in man | orderBy 'name' -1"> <!--输出Jackie Chuck Bruce-->
        <li>{{item.name}}</li>
      </ul>
      
      <!--使用函数排序-->
      <ul v-for="item in man | orderBy ageByTen"> <!--输出Bruce Chuck Jackie-->
        <li>{{item.name}}</li>
      </ul>
    </div>
    <script type="text/javascript">
      var myVue = new Vue({
        el: ".test",
        data: {
          lili: ["oi", "kk", "ll"],
          man: [  //此处注意man是数组,不是对象
         {
          name: 'Jackie',
          age: 62
         },
         {
          name: 'Chuck',
          age: 76
         },
         {
          name: 'Bruce',
          age: 61
         }
        ]
        },
        methods: {
          ageByTen: function () {
            return 1;
          }
        }
      })
    </script>
  </body>
</html>

本文源码地址：vue-filter_3water.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Vue实现自带的过滤器实例

- Author -

半亩花田

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一直复略了的一个问题，关于表单重复提交
Feb 15 Javascript
List all the Databases on a SQL Server
Jun 21 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
Vue中fragment.js使用方法详解
Mar 09 #Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 #Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 #Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 #Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 #Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 #Javascript
js实现3D图片环展示效果
Mar 09 #Javascript
Parser(1) 双人对弈(1) 后端(1) Vscode(3) 人人对战(1) 递归(1) 算法(1) SSH(3) 时钟(1) tokenizer(1)
You might like
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php实现zip压缩文件解压缩代码分享（简单易懂）
2014/05/10 PHP
PHP常用数组函数介绍
2014/07/28 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
php实现微信支付之企业付款
2018/05/30 PHP
PHP中抽象类，接口功能、定义方法示例
2019/02/26 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
基于Python List的赋值方法
2018/06/23 Python
python实现网页自动签到功能
2019/01/21 Python
Python对象与引用的介绍
2019/01/24 Python
Python reques接口测试框架实现代码
2020/07/28 Python
python speech模块的使用方法
2020/09/09 Python
Python3读写ini配置文件的示例
2020/11/06 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
美国精品家居用品网站：US-Mattress
2016/08/24 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
安全责任书范文
2014/08/25 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
员工担保书范本
2015/09/22 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL