vue过滤器用法实例分析

最新推荐文章于 2022-10-27 21:46:20 发布
最新推荐文章于 2022-10-27 21:46:20 发布
阅读量108 收藏
点赞数
原文链接：http://www.cnblogs.com/good10000/p/10592561.html
版权

过滤器:

vue提供过滤器:

capitalize uppercase currency....

?
1
2
3
< div id = "box" >
     {{msg|currency ￥}}
   </ div >

debounce 配合事件，延迟执行

?
1
2
3
< div id = "box" >
     < input type = "text" @ keyup = "show | debounce 2000" >
   </ div >

数据配合使用过滤器:

limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id= "box" >
     <ul>
       <!--取2个-->
       <li v- for = "val in arr | limitBy 2" >
         {{val}}
       </li>
       <br/>
       <br/>
       <!--取2个，从第arr.length-2个开始取-->
       <li v- for = "val in arr | limitBy 2 arr.length-2" >
         {{val}}
       </li>
     </ul>
   </div>
   <script>
     var vm= new Vue({
       data:{
         arr:[1,2,3,4,5]
       },
       methods:{
       }
     }).$mount( '#box' );
   </script>

vue插件filterBy 过滤数据
filterBy '谁'

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id= "box" >
     <input type= "text" v-model= "a" >
     <ul>
       <li v- for = "val in arr | filterBy a" >
         {{val}}
       </li>
     </ul>
   </div>
   <script>
     var vm= new Vue({
       data:{
         arr:[ 'width' , 'height' , 'background' , 'orange' ],
         a: ''
       },
       methods:{
       }
     }).$mount( '#box' );
   </script>

angular orderBy 排序

orderBy 谁 1/-1
1 -> 正序
2 -> 倒序

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id= "box" >
     <input type= "text" v-model= "a" >
     <ul>
       <li v- for = "val in arr | orderBy -1" >
         {{val}}
       </li>
     </ul>
   </div>
   <script>
     var vm= new Vue({
       data:{
         arr:[ 'width' , 'height' , 'background' , 'orange' ],
         a: ''
       },
       methods:{
       }
     }).$mount( '#box' );
   </script>

自定义过滤器: model ->过滤 -> view

?
1
2
Vue.filter(name, function (input){
});
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id= "box" >
     {{a | toDou 1 2}}
   </div>
   <script>
     Vue.filter( 'toDou' , function (input,a,b){
       alert(a+ ',' +b);
       return input<10? '0' +input: '' +input;
     });
     var vm= new Vue({
       data:{
         a:9
       },
       methods:{
       }
     }).$mount( '#box' );
   </script>

时间转化器

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id= "box" >
     {{a | date}}
   </div>
   <script>
     Vue.filter( 'date' , function (input){
       var oDate= new Date(input);
       return oDate.getFullYear()+ '-' +(oDate.getMonth()+1)+ '-' +oDate.getDate()+ ' ' +oDate.getHours()+ ':' +oDate.getMinutes()+ ':' +oDate.getSeconds();
     });
     var vm= new Vue({
       data:{
         a:Date.now() //返回1970 年 1 月 1日午夜与当前日期和时间之间的毫秒数。
       },
       methods:{
       }
     }).$mount( '#box' );
   </script>

50、选择器过滤html标记

双向过滤器:*

?
1
2
3
4
5
6
7
8
Vue.filter( 'filterHtml' ,{
　　read: function (input){ //model-view
　　　　 return input.replace(/<[^<+]>/g, '' );
　　},
　　write: function (val){ //view -> model
　　　　 return val;
　　}
});

数据 -> 视图

model -> view

view -> model

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang= "en" >
<head>
   <meta charset= "UTF-8" >
   <title></title>
   <style>
   </style>
   <script src= "vue.js" ></script>
   <script>
     //<h2>welcome</h2>
     Vue.filter( 'filterHtml' ,{
       read: function (input){ //model-view
         alert(1);
         return input.replace(/<[^<]+>/g, '' );
       },
       write: function (val){ //view -> model
         console.log(val);
         return val;
       }
     });
     window.onload= function (){
       var vm= new Vue({
         data:{
           msg: '<strong>welcome</strong>'
         }
       }).$mount( '#box' );
     };
   </script>
</head>
<body>
   <div id= "box" >
     <input type= "text" v-model= "msg | filterHtml" >
     <br>
     {{msg | filterHtml}}
   </div>
</body>
</html>

转载于:https://www.cnblogs.com/good10000/p/10592561.html

weixin_34409741
关注
vue基础之模板和过滤器用法实例分析
10-17
本文主要聚焦于Vue模板和过滤器的基础知识，通过实例来展现它们的用法，并说明了在使用过程中的一些注意事项。接下来将详细介绍这两部分的知识。 首先，Vue模板是一种声明式描述，允许开发者使用简单的HTML标记来...
vue过滤器含例子
atu1111的博客
07-19 264
vue过滤器   Vue. js支持在{{}}插值的尾部添加一小管道符 “ 。 ” 对数据进行过滤，经常用于格式化文 本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的， 通过给 Vue 实例添 加选项 filters 来设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width
Vue记忆结构(四) vue过滤器语法及实例
王某人
03-14 218
1. 作用: 不改变数据的前提下，设置输出前端需要的格式 定义方法： Vue.filter(‘mingzi’,function(value){ //处理方法 }); 调用方法： {{ msg | mingzi }} 注意： 定义过滤器，必须放在所有实例前面 在没有冲突的情况下，过滤器可以串联 2.过滤器的使用 &lt;!DOCTYPE html&gt; &...
Vue简单实例——过滤器
hssjsh的博客
10-27 738
Vue简单实例——过滤器的简单介绍和一个简单的实例
vue基础之过滤器(filter)的使用
热门推荐
badmoonc的博客
08-07 2万+
 使用方式： &lt;!-- 在双花括号中 --&gt; {{ message | formatDate }} &lt;!-- 在 `v-bind` 中 --&gt; &lt;div v-bind:id="rawId | formatDate"&gt;&lt;/div&gt; 那么，我们该如何去写过滤器呢？接下来我们假定一种场景，后端返回的一个 时间列表大概是长下边这样的： [ ...
vue filter过滤器的使用（带实例解析）
yehaocheng520的博客
07-16 1488
vue中过滤器的使用 vue中过滤器分为全局跟组件内两种，此处使用的是组件内的过滤器。 filters: { //过滤器的名称为dataFormat，处理的数据为msg，最终返回一个数据即可。 dataFormat(msg) { const attrList = []; for (var i = 0; i < msg.length; i++) { attrList.push(msg[i].attributeValue); } return attrLi
vue学习笔记之过滤器的基本使用方法实例分析
10-15
在本篇Vue学习笔记中，我们将深入探讨Vue过滤器的基本使用方法，通过实例来展示如何创建和应用过滤器。 1. **过滤器的基本结构** 在Vue中，过滤器是通过`filters`对象在Vue实例中定义的。例如： ```javascript ...
v-html中使用过滤器无效解决办法
Red_sevenWord的博客
07-10 730
在HTML模板中使用过滤器失效，那么就改用其他办法实现，将过滤函数值return给一个函数，v-html=“function(value)” 结构 <div v-html="htmlFormat(item.html)"></div> 函数 当前代码作用是删除p标签中的内容 methods: { htmlFormat(value) { if (!value) return '' value = value.replac
replace过滤html标签
zt-records的博客
01-24 361
replaceFn(val){ return val.replace(/<[^>]*>/g,''); }
vue 过滤器基本用法
seven_an的博客
12-11 2万+
使用地点：双花括号插值和v-bind表达式。 {{ message|capitalize}} new Vue({ el:"#app", data:{ message:"pwd" }, filters:{ capitalize:function(value){ return value+'a' } } }) 注意：过滤器函数接收的第一个值是message，依次
vue过滤器
一只前端小菜鸟
04-17 1万+
过滤数据是我们日常开发中必然会用到的。 常见的场景：当我们从后端请求到数据列表时，我们需要对其中符合条件的数据进行筛选、当我们拿到数据，我们希望把英文首字母大写，等等。 js常用的操作方法是filter： array.filter(function(currentValue,index,arr), thisValue) 我们一起来看个示例： const arr = [ { n...
mixins,自定义指令,render函数(待研究填坑),过滤器
weixin_33692284的博客
03-20 503
混入 (mixins) # 混入 (mixins) 是一种分发Vue组件中可复用功能的非常灵活的方式。 混入对象可以包含任意组件选项。当组件使用 混入对象时，所有混入对象的选项将被混入该组件本身的选项。 // 定义一个混入对象 var myMixin = { created: function () { this.hello() }, methods: { hello...
vue下滤器html标签
小耳朵晨晨
03-27 3025
首先想到的是使用过滤器 filters: { htmlfilter: function (val) { return val.replace(/<[^>]*>/g); } } <p>{{cont.content | htmlfilter}}</p> 可是标签换成了undefined 被输出 然后控制台也报错： Error in rend...
Vue 中过滤器的使用和定义
陈祖路的个人博客
07-05 5044
Vue 中过滤器的使用和定义  过滤器的定义 1、全局过滤器的定义 mian.js 中进行定义 Vue.filter("moneyFilter", function(value, num, type) { //value是使用过滤器是的表达式或者值,num和tyep中的参数 return "￥" + value.toFixed(num) + type; }); 过滤...
vue属性 filter过滤器
npc_energy的博客
06-26 1962
vue属性 filter过滤器 自定义过滤器 定义过滤器有两种方式，第一种是全局过滤器，我们可以直接在vue对象上使用filter方法注册过滤器，这种全局注册的过滤器在任何一个组件内都可以使用。第二种则是组件内部的过滤器，注册组件内部过滤器则只能在当前组件内使用，接下来我们使用这两种方式注册过滤器函数。 全局过滤器 <body> <div id="app"> ...
vue过滤器小案例
xiao白的博客
12-29 577
当我们请求后台数据时，我们有的就需要用到过滤器了，比如订单状态、性别等。下面就是过滤器的使用小案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../lib/vue.js" type="text/j...
html过滤器作用,vue指令v-html中使用过滤器filters功能
weixin_29314405的博客
06-07 269
Vue 2.0 不再支持在 v-html 中使用过滤器解决方法：1：全局方法(推荐)2：computed 属性3：$options.filters(推荐)1：使用全局方法：可以在 Vue 上定义全局方法：Vue.prototype.msg = function(msg){return msg.replace("\n"，"")}；然后所有地方上都可以直接用这个方法了：2：computed 属性var...
vue2.0 自定义过滤器（filter）实例
wandoumm的博客
05-15 3456
一、过滤器简介（1）过滤器创建　　过滤器的本质 是一个有参数 有返回值的方法1234567new Vue({  filters:{    myCurrency:function(myInput){      return 处理后的数据    }  }})（2）过滤器使用语法：1&lt;any&gt;{{表达式 | 过滤器}}&lt;/any&gt;举个例子：1&lt;h1&gt;{{price |...
Vue TODO案例分析：构建动态任务管理器
"Vue 基础TODO案例分析是一个针对前端开发的学习教程，重点在于使用Vue.js框架构建一个基本的待办事项应用。这个案例涵盖了动态数据渲染、删除任务、添加任务、全选与反选、显示未完成任务数量、任务过滤以及清除已...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值