编程 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 相关文章推荐

prototype 源码中文说明之 prototype.js

Sep 22 Javascript

jquery实现文本框鼠标右击无效以及不能输入的代码

Nov 05 Javascript

bootstrap table动态加载数据示例代码

Mar 25 Javascript

在JS中如何把毫秒转换成规定的日期时间格式实例

May 11 Javascript

vue学习笔记之vue1.0和vue2.0的区别介绍

May 17 Javascript

Angular5给组件本身的标签添加样式class的方法

Apr 07 Javascript

Angularjs实现多图片上传预览功能

Jul 18 Javascript

使用validate.js实现表单数据提交前的验证方法

Sep 04 Javascript

浅析vue 函数配置项watch及函数 $watch 源码分享

Nov 22 Javascript

微信小程序实现文件、图片上传功能

Aug 18 Javascript

VUE DEMO之模拟登录个人中心页面之间数据传值实例

Oct 31 Javascript

在Vue中实现随hash改变响应菜单高亮

Mar 09 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