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 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
javascript document.referrer 用法
Apr 30 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
详解vue axios中文文档
Sep 12 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
Python最基本的输入输出详解
2015/04/25 Python
全面了解python字符串和字典
2016/07/07 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
Python for循环及基础用法详解
2019/11/08 Python
Python reversed函数及使用方法解析
2020/03/17 Python
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
工业设计专业推荐信
2013/10/29 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
股份合作协议书
2014/04/12 职场文书
四查四看整改措施
2014/09/19 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
营业员岗位职责范本
2015/04/14 职场文书
指导教师推荐意见
2015/06/05 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
关于分班的感言
2015/08/04 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python