www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

的兑今世码,filter介绍及详细使用

2019-06-07 03:18 来源:未知

VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果

Vue filter介绍及其使用

vue2.0里,不再有自带的过滤器,需要自己定义过滤器。定义的方法如下:

图片 1

VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果。

注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。

Vue 过滤器的基本用法

Vue.js自带了一些默认过滤器例如:

Vue.filter('filtername',function(value,参数){
    return 参数 value.split('').reverse().join('');

  });1234123 
// 注册
Vue.filter('my-filter', function (value) {
 // 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')


//在mustache中使用
{{ msg | uppercase }}

capitalize 首字母大写

完整代码如下:

uppercase 全部大写

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<script src='./vue2.js'></script>
<script>
window.onload=function(){
  //类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。
  Vue.filter('reverseString',function(value,myString){
    // function里第一个参数value默认为使用这个过滤器的data值,在本例中是msg的值'you are mine'。请注意:第一个参数必须为自身的值,后面可以加任意多的参数
    return myString value.split('').reverse().join('');
  });
  new Vue({
    el:'#box',
    data:{
      msg:'you are mine' 
    }  
  });
};
</script>
<body>
<div id='box'>
  <p>msg is: <br>{{msg}}</p>
  <hr>
  <p>reverse msg is: <br>{{msg|reverseString( 'Hello:' )}}</p>   <!-- 在vue2.0里 过滤器只能用类似函数的写法reverseString( 'I must tell you:'),括号内是参数,不同于vue1.0的用空格后加参数的写法" msg|reverseString 'I must tell you:' " -->
</div>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940411234567891011121314151617181920212223242526272829303132333435363738394041
//在标签中使用
<input type="password" v-model="psw | validate">

lowercase 全部小写

输出结果为:

默认的过滤器

currency 输出金钱以及小数点

msg is: 
you are mine
reverse msg is: 
Hello:enim era uoy

注意:在Vue 2.0版本中已经废弃使用默认过滤器

pluralize 输出复数的形式

以上所述是小编给大家介绍的vue2中filter()的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

名称 功能
capitalize 首字母大写
uppercase 全部大写
lowercase 全部小写
currency 输出金钱以及小数点
pluralize 输出复数的形式
debounce 延期执行函数
limitBy 在 v-for 中使用,限制数量
filterBy 在 v-for 中使用,选择数据
orderBy 在 v-for 中使用,排序

debounce 延期执行函数

您可能感兴趣的文章:

  • Vue filters过滤器的使用方法
  • vue分类筛选filter方法简单实例
  • vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
  • Vue.js报错Failed to resolve filter问题的解决方法
  • Vue filter介绍及其使用详解

自定义过滤器

limitBy 在 v-for 中使用,限制数量

使用全局定义一个过滤器

filterBy 在 v-for 中使用,选择数据

 //过滤非法字符
 Vue.filter('validate', function(val) {
  val = val.toString();
  reg = /[`~!@#$%^&*()_ <>?:"{},/;']/im;

  if(reg.test(val)) {
   $.alert("请勿输入非法字符", "温馨提示");
   //返回时删除非法字符
   return val.substr(0, val.length - 1);
  } else {
   //原内容返回
   return val;
  }
 });

orderBy 在 v-for 中使用,排序

在表单中使用

在Vue中还自带了filter自定义过滤器代码说明一切: 

<input type="password" placeholder="输入密码" v-model="psw | validate" maxlength = "18">

 

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

图片 2

您可能感兴趣的文章:

  • Vue filters过滤器的使用方法
  • vue2中filter()的实现代码
  • vue分类筛选filter方法简单实例
  • vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
  • Vue.js报错Failed to resolve filter问题的解决方法

图片 3

下面一个实例讲解Vue自带过滤器的使用:

效果图:

图片 4

图片 5

上代码:

图片 6

图片 7

图片 8

至此Vue filter的介绍及详细使用介绍完毕

您可能感兴趣的文章:

  • Vue filter介绍及其使用详解
  • Vue filters过滤器的使用方法
  • vue2中filter()的实现代码
  • vue分类筛选filter方法简单实例
  • vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
  • Vue.js报错Failed to resolve filter问题的解决方法
TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:的兑今世码,filter介绍及详细使用