vue2 v-model/v-text 中使用过滤器的方法示例


Posted in Javascript onMay 09, 2019

Vue.js 允许自定义过滤器,一般可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | formatId"></div>

可以在一个组件的选项中定义私有的过滤器:

filters: {
  dateFormat: (dataStr) => {
   var time = new Date(dataStr);
  
   function timeAdd0(str) {
    if (str < 10) {
     str = '0' + str;
    }
    return str
   }
   var y = time.getFullYear();
   var m = time.getMonth() + 1;
   var d = time.getDate();
   var h = time.getHours();
   var mm = time.getMinutes();
   var s = time.getSeconds();
   return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
  }
}

或者在创建 Vue 实例之前全局定义过滤器:

Vue.filter('dateFormat', (dataStr) => {
 var time = new Date(dataStr);

 function timeAdd0(str) {
  if (str < 10) {
   str = '0' + str;
  }
  return str
 }
 var y = time.getFullYear();
 var m = time.getMonth() + 1;
 var d = time.getDate();
 var h = time.getHours();
 var mm = time.getMinutes();
 var s = time.getSeconds();
 return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
})

但是如果想要在v-model或者v-text中使用过滤器是不生效的,可以参考以下写法:

<template>
 <div id="app">
  <input type="text" v-model="userDate" />  
  <span>{{ userDate | dateFormat }}</span>
 </div>
</template>

<script>
export default {
  data: {
    return {
      userDate:'',
    }
  },
    filters: {
    dateFormat: (dataStr) => {
     var time = new Date(dataStr);
    
     function timeAdd0(str) {
      if (str < 10) {
       str = '0' + str;
      }
      return str
     }
     var y = time.getFullYear();
     var m = time.getMonth() + 1;
     var d = time.getDate();
     var h = time.getHours();
     var mm = time.getMinutes();
     var s = time.getSeconds();
     return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
    }
  }
}
</script>

<style>
</style>

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

Javascript 相关文章推荐
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 #Javascript
uni-app之APP和小程序微信授权方法
May 09 #Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 #Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 #Javascript
JS原型与继承操作示例
May 09 #Javascript
详解微信小程序回到顶部的两种方式
May 09 #Javascript
jquery登录的异步验证操作示例
May 09 #jQuery
You might like
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
javascript的BOM汇总
2015/07/16 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python 字符串格式化代码
2013/03/17 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
院药学专业个人求职信
2013/09/21 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
见习期自我鉴定
2014/01/31 职场文书
团日活动总结怎么写
2014/06/25 职场文书
商场周年庆活动方案
2014/08/19 职场文书
电力培训心得体会
2014/09/02 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
golang正则之命名分组方式
2021/04/25 Golang