1、示例代码
采用vue单文件组件,使用moment插件格式化日期
<template> <div> <h1>{{date | dateFormat}}</h1> </div> </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(); } } } </script>
2、效果
3、说明
过滤器内是没有this引用的,过滤器内的this是undefined,所以不要在过滤器内尝试使用this引用组件实例的变量或者方法。
ps:下面看下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 过滤器filters及基本用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
您可能感兴趣的文章:
- vue-cli 3 全局过滤器的实例代码详解
- vue实现前台列表数据过滤搜索、分页效果
- vue2 v-model/v-text 中使用过滤器的方法示例
- vue中格式化时间过滤器代码实例
- 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
- Vue2.0 v-for filter列表过滤功能的实现
- Vue数组更新及过滤排序功能
- vue 的 solt 子组件过滤过程解析