首页
所有分类
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 相关文章推荐
javascript 读取XML数据，在页面中展现、编辑、保存的实现
Oct 27 Javascript
javascript深入理解js闭包
Jul 03 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
简单的js计算器实现
Oct 26 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
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
ip连接(1) props(1) mixin(1) ECharts(3) 游标(1) 临时表(1) timestamp(1) 排序失效(1) GTID(1) 表变量(1)
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
jQuery的12招常用技巧分享
2011/08/08 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
JavaScript sub方法入门实例（把字符串显示为下标）
2014/10/17 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
Python编程中的for循环语句学习教程
2015/10/14 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
python读取指定字节长度的文本方法
2019/08/27 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
Giglio德国网上精品店：奢侈品服装和配件
2016/09/23 全球购物
Hotels.com加拿大：领先的在线住宿网站
2018/10/05 全球购物
教师自荐信
2013/12/10 职场文书
《王二小》教学反思
2014/02/27 职场文书
亮化工程实施方案
2014/03/17 职场文书
个人思想政治总结
2015/03/05 职场文书
英文辞职信范文
2015/05/13 职场文书
公司回复函格式
2015/07/14 职场文书
《围炉夜话》110句人生箴言，精辟有内涵，引人深思
2019/10/23 职场文书
PHP中->和=>的意思
2021/03/31 PHP
5行Python代码实现一键批量扣图
2021/06/29 Python