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 相关文章推荐
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
JS实现小星星特效
Dec 24 Javascript
vue.js实现简单购物车功能
May 30 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
实用函数4
2007/11/08 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
js字符编码函数区别分析
2011/12/28 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
django之常用命令详解
2016/06/30 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Flask数据库迁移简单介绍
2017/10/24 Python
python实现聚类算法原理
2018/02/12 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python文件读写代码实例
2019/10/21 Python
python 循环数据赋值实例
2019/12/02 Python
浅析Django中关于session的使用
2019/12/30 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
如何在sublime编辑器中安装python
2020/05/20 Python
python新手学习使用库
2020/06/11 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
Linux的文件类型
2016/07/05 面试题
中医临床专业自我鉴定范文
2014/01/15 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers