Vue filter介绍及其使用详解
更新时间：2017年10月21日 11:38:06 作者：craftmanship
本篇文章主要介绍了Vue filter介绍及其使用详解，VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理。一起跟随小编过来看看吧
VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理，返回需要的结果
Vue 过滤器的基本用法
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
//在mustache中使用
{{ msg | uppercase }}
或
//在标签中使用 <input type="password" v-model="psw | validate">
默认的过滤器
注意：在Vue 2.0版本中已经废弃使用默认过滤器
| 名称 | 功能 |
|---|---|
| capitalize | 首字母大写 |
| uppercase | 全部大写 |
| lowercase | 全部小写 |
| currency | 输出金钱以及小数点 |
| pluralize | 输出复数的形式 |
| debounce | 延期执行函数 |
| limitBy | 在 v-for 中使用，限制数量 |
| filterBy | 在 v-for 中使用，选择数据 |
| orderBy | 在 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;
}
});
在表单中使用
<input type="password" placeholder="输入密码" v-model="psw | validate" maxlength = "18">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何使用vue slot创建一个模态框,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
在本篇文章里小编给大家分享了关于vue安装遇到的5个报错小结以及解决方法，需要的朋友们参考下。2019-06-06
在vue中使用css modules替代scroped的方法
本篇文章主要介绍了在vue中使用css modules替代scroped的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了详解vue/cli 3使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
我们通过实例代码给大家分享了Vue中watch的高级用法，对此知识点有需要的朋友可以跟着学习下。2018-05-05
elementui时间/日期选择器选择禁用当前之前(之后)时间代码实例
当我们在进行网页开发时,通常需要用到一些日期组件来方便用户选择时间,其中element日期组件是一个非常好用的工具,这篇文章主要给大家介绍了关于elementui时间/日期选择器选择禁用当前之前(之后)时间的相关资料,需要的朋友可以参考下2024-02-02
使用vue-json-viewer实现JSON数据可视化详解
vue-json-viewer 是一个用于在 vue.js 应用中展示 JSON 数据的插件,它提供了一种直观和美观的方式来可视化 JSON 数据,下面我们来看看如何使用它进行JSON数据可视化吧2025-01-01
Vue 应用在首屏加载时速度过慢,通常与以下问题有关：打包文件过大、网络请求过多、资源加载过慢,针对这些问题,本文给大家介绍了Vue首屏加载过慢的优化方法,需要的朋友可以参考下2025-01-01
vue中this.$http.post()跨域和请求参数丢失的解决
这篇文章主要介绍了vue中this.$http.post()跨域和请求参数丢失的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要介绍了Vue中实现滚动加载与无限滚动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
最新评论