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 相关文章推荐
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
vue3中的组件间通信
Mar 31 Vue.js
快速搭建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
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
Python 爬虫图片简单实现
2017/06/01 Python
深入理解Python中的super()方法
2017/11/20 Python
python爬取微信公众号文章
2018/08/31 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
python三大神器之fabric使用教程
2019/06/10 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
如何理解Python中包的引入
2020/05/29 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
出纳岗位职责
2015/01/31 职场文书
2016党员党课心得体会
2016/01/07 职场文书