Vue 过滤器filters及基本用法


Posted in Javascript onDecember 26, 2017

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、效果

Vue 过滤器filters及基本用法

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及基本用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Opacity.js
Jan 22 Javascript
javascript之锁定表格栏位
Jun 29 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
Javascript防止图片拉伸的自适应处理方法
Dec 26 #Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 #Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 #Javascript
Webpack实战加载SVG的方法
Dec 26 #Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 #Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 #Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 #Javascript
You might like
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
php实现插入排序
2015/03/29 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
php文件包含的几种方式总结
2019/09/19 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
vue的mixins属性详解
2018/03/14 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
react高阶组件添加和删除props
2019/04/26 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python生成器generator用法实例分析
2015/06/04 Python
Python实现的爬虫功能代码
2017/06/24 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python随机数函数代码实例解析
2020/02/09 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Java平台和其他软件平台有什么不同
2015/06/05 面试题
信息专业学生学习的自我评价
2014/02/17 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL
Python OpenCV实现图形检测示例详解
2022/04/08 Python