首页 / VUE / Vue实现自带的过滤器实例

Vue实现自带的过滤器实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue实现自带的过滤器实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7604字，纯文字阅读大概需要11分钟。

内容图文

一过滤器写法

{{ 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"}}  </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'}}  </li> </ul> <ul v-for="item in lili"> <li> {{item}} {{item | pluralize 'st' 'rd'}}  </li> </ul> <ul v-for="item in man"> <li> {{item}} {{item | pluralize 'item'}}  </li> </ul> <ul v-for="item in man"> <li> {{item}} {{item | pluralize 'st' '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">  <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' ">  <li>{{item.name}}</li> </ul> <ul v-for="item in man | filterBy 'l' in 'name' 'dada' ">  <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">  <li>{{item}}</li> </ul>  <ul v-for="item in man | orderBy 'name' 1">  <li>{{item.name}}</li> </ul> <ul v-for="item in man | orderBy 'name' -1">  <li>{{item.name}}</li> </ul>  <ul v-for="item in man | orderBy ageByTen">  <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_jb51.rar

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

内容总结

以上是互联网集市为您收集整理的Vue实现自带的过滤器实例全部内容，希望文章能够帮你解决Vue实现自带的过滤器实例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/345310.html

来源：【匿名】

【上一篇】Vue中fragment.js使用方法详解【下一篇】php怎么返回数据给vue

更多 ►

【Vue实现自带的过滤器实例】教程文章相关的互联网学习教程文章

Vue 自定义按键修饰符，自定义指令，自定义过滤器【代码】

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<link rel="stylesheet" type="text/css" href="./css/bootstrap.css"/> 7<script src="../vue.js" type="text/javascript" charset="utf-8"></script> 8</head> 9<body> 10<div id="app"> 11 12<div class="panel panel-primary"> 13<div class="panel-heading"> 14<h3 class="panel-title">demo</h3> 15</div> 16<div class="panel-body fo...

Vue中的动画、监听见、过滤器、计算属性【代码】

1.动画基础使用：给哪个元素添加动画，只需要给元素用<transition>标签包裹起来就可以<transition><div class="box" v-show=‘isShow‘></div> </transition>之后去样式中设置6个类名即可 .v-enter {opacity: 0;}.v-enter-to {opacity: 1;}.v-enter-active {transition: all 2s;}.v-leave {opacity: 1;}.v-leave-to {opacity: 0;}.v-leave-active {transition: all 2s;}如果页面中有多个元素需要添加不同的动画，那么只需要给<tran...

vue的过滤器filter【代码】【图】

前记：　　　排版记录，点耽误时间，我就简单的来，下面是一个vue 过滤器的写法，demo 演示，限制一个字符串的长度。vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍：某个filter.js// 限制汉字的个数 export const limitWordLength = Vue.filter(‘limitWordLength‘, (str, length, sufix) => {/* eslint-disable */let r = /[^\x00-\xff]/g // 双字节正则 let mif (str.r...

Vue如何封装多个全局过滤器到一个文件【代码】

#### 在写vue项目时，所用的过滤器很多时，把所有的过滤器方法封装在一个文件中，然后导出，并绑定在vue实例上1.在src下创建filters文件夹，并新建index.js文件2. index.js里面的代码import moment from 'moment' const dateFormat = (input, fmtstring) => {// 使用momentjs这个日期格式化类库实现日期的格式化功能return moment(input).format(fmtstring); }const moneyFormat = value => {if (!value) return '0.00';/原来用的是...

Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充，自定义按键修饰符，全局自定义指令文本框获取焦点，bind函数拿到传递的颜色值，自定义私有指令和指令函数的简写）【代码】【图】

Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充，自定义按键修饰符，全局自定义指令文本框获取焦点，bind函数拿到传递的颜色值，自定义私有指令和指令函数的简写） p34 p35 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<script src="../js/vue.js"></script> 7<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/> 8</head> 9<body> 10<di...

vue的过滤器【代码】

Vue.Js 提供了强大的过滤器API，能够对数据进行各种过滤处理，返回需要的结果vue的过滤器一般在JavaScript 表达式的尾部，由“|”符号指示：过滤器可以让我们的代码更加优美，一般可以用在时间格式化，首字母大写等等。例如：{{ date | dateFormat }}这是过滤器的写法；{{ dateFormat(date) }}这是函数调用的写法可以看出过滤器的写法更加语义化，让人一眼可以看出它的含义 {{ message | capitalize }} <!-- ...

vuebase-7.过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：实例：<template lang="html"> <div class="filter"> {{money|rmb}} <p>{{100|rmb}}</p> <p>作者{{authors|author}}</p> </div></template><script> export default { name: "filterDemo", data()...

Vue中定义全局过滤器【代码】

定义过滤器格式化方法 tools/filters.js// 格式化方法 function currencyFormat(value, symbol = ‘￥‘) {return symbol + value; }// 导出多个 export { currencyFormat } 在main.js中批量注册全局过滤器import * as filters from ‘./tools/filters‘; // 注册全局过滤器 Object.keys(filters).forEach(key => {Vue.filter(key, filters[key]) }) 过滤器的使用// 在文本插值中的默认使用 {{ currency | currencyFormat }} //...

Vue过滤器的基本使用【图】

1、过滤器的基本使用 2.过滤器也可以进行传参3.私有过滤器的使用原文：https://www.cnblogs.com/doumian/p/12104779.html

vue2购物车ch3-（过滤器使用单件商品金额计算全选全不选总金额计算删除商品功能）【代码】【图】

1 index.html<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>购物车</title><link href="css/base2.css" rel="stylesheet" ><link href="css/checkout.css" rel="styl...

Vue的过滤器,生命周期的钩子函数和使用Vue-router【代码】

一.过滤器　　1.局部过滤器在当前组件内部使用过滤器给某些数据添油加醋//声明 filters:{‘过滤器的名字‘:function(val,a,b){//a 就是alax ，val就是当前的数据} } //使用管道符数据 | 过滤器的名字(‘alex‘，‘wusir‘) <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div id="app"><App /></di...

（四十二)springcloud+springboot+uniapp+vue b2b2c 分布式微服务电子商务商城之SpringCloud-Gateway过滤器工厂的使用【代码】

GatewayFilter Factory 是 Spring Cloud Gateway 中提供的过滤器工厂。Spring Cloud Gateway 的路由过滤器允许以某种方式修改传入的 HTTP 请求或输出的 HTTP 响应，只作用于特定的路由。 Spring Cloud Gateway 中内置了很多过滤器工厂，直接采用配置的方式使用即可，同时也支持自定义 GatewayFilter Factory 来实现更复杂的业务需求。 spring:cloud:gateway:routes:- id: add_request_header_routeuri: http://c.biancheng.netfilt...

vue中自定义过滤器的代码实现

本篇文章给大家带来的内容是关于vue中自定义过滤器的代码实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。不多说直接上代码新建filter.js文件如：// 金额分 --> 元 exports.fen_yuan = (value) => { let tmp = Number(value) || 0// tmp = parseInt(tmp, 10);tmp /= 100return tmp.toFixed(2) }**.vue文件中<script>import * as filter from @/util/filterimport { mapState } from vueximport { T...

在Vue中关于过滤器filters的用法【图】

这篇文章主要介绍了Vue 过滤器filters的实例代码以及vue过滤器的基本用法,需要的朋友可以参考下1、示例代码采用vue单文件组件，使用moment插件格式化日期<template><p><h1>{{date | dateFormat}}</h1> </p> </template> <script>import moment from moment;import moment/locale/zh-cn;moment.locale(zh-cn);export default {data() {return {date: new Date()}},filters: {dateFormat(val) {return moment(val).calendar();}}} </...

Vue做出人名币金额过滤器【图】

这次给大家带来Vue做出人名币金额过滤器，Vue做出人名币金额过滤器的注意事项有哪些，下面就是实战案例，一起来看一下。前端处理一些金额，数字类的数据要求按照固定的格式显示，比如9,527,025，或者带有小数（如1,587.23）仍要三位一断。有些话也不必多说，既然要求如此，实现呗。作为前端主流框架之一的Vue，类似的功能肯定都有人写的很完善了。我呢，最讨厌不动脑筋去网上找现成的，所以我自己写了一个。话不多说，先放效果图再...

首页 / VUE / Vue实现自带的过滤器实例

Vue实现自带的过滤器实例

内容导读

内容图文

内容总结

内容备注

内容手机端

【Vue实现自带的过滤器实例】教程文章相关的互联网学习教程文章

Vue 自定义按键修饰符，自定义指令，自定义过滤器【代码】

Vue中的动画、监听见、过滤器、计算属性【代码】

vue的过滤器filter【代码】【图】

Vue如何封装多个全局过滤器到一个文件【代码】

Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充，自定义按键修饰符，全局自定义指令文本框获取焦点，bind函数拿到传递的颜色值，自定义私有指令和指令函数的简写）【代码】【图】

vue的过滤器【代码】

vuebase-7.过滤器

Vue中定义全局过滤器【代码】

Vue过滤器的基本使用【图】

vue2购物车ch3-（过滤器使用单件商品金额计算全选全不选总金额计算删除商品功能）【代码】【图】

Vue的过滤器,生命周期的钩子函数和使用Vue-router【代码】

（四十二)springcloud+springboot+uniapp+vue b2b2c 分布式微服务电子商务商城之SpringCloud-Gateway过滤器工厂的使用【代码】

vue中自定义过滤器的代码实现

在Vue中关于过滤器filters的用法【图】

Vue做出人名币金额过滤器【图】

VUE - 相关标签

实例 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程