vue过滤器用法实例分析

来源：动视网责编：小采时间：2020-11-27 21:59:52

vue过滤器用法实例分析

vue过滤器用法实例分析:本文实例讲述了vue过滤器用法。分享给大家供大家参考，具体如下：过滤器: vue提供过滤器: capitalize uppercase currency.... <div id=box> {{msg|currency ￥}} </div> debounce 配合事件，延迟执行 <

推荐度：

点击下载本文 文档为doc格式

导读vue过滤器用法实例分析:本文实例讲述了vue过滤器用法。分享给大家供大家参考，具体如下：过滤器: vue提供过滤器: capitalize uppercase currency.... <div id=box> {{msg|currency ￥}} </div> debounce 配合事件，延迟执行 <

本文实例讲述了vue过滤器用法。分享给大家供大家参考，具体如下：

过滤器:

vue提供过滤器:

capitalize uppercase currency....

<div id="box">
 {{msg|currency ￥}}
 </div>

debounce 配合事件，延迟执行

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

数据配合使用过滤器:

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

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

filterBy 过滤数据
filterBy '谁'

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

orderBy 排序

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

<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

Vue.filter(name,function(input){
});

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

时间转化器

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

过滤html标记

双向过滤器:*

Vue.filter('filterHtml',{
　　read:function(input){ //model-view
　　　　return input.replace(/<[^<+]>/g,'');
　　},
　　write:function(val){ //view -> model
　　　　return val;
　　}
});

数据 -> 视图

model -> view

view -> model

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

希望本文所述对大家vue.js程序设计有所帮助。

vue过滤器用法实例分析

推荐度：

点击下载本文 文档为doc格式

标签： VUE 实例分析

热门焦点

vue过滤器用法实例分析

vue过滤器用法实例分析

vue过滤器用法实例分析

最新推荐

猜你喜欢

热门推荐