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编程起步(第六课)
Feb 27 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
理解JS事件循环
Jan 07 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
vue组件中节流函数的失效的原因和解决方法
Dec 02 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+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
React实现全选功能
2020/08/25 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python实现注册、登录小程序功能
2018/09/21 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
怎样写好创业计划书的内容
2014/02/06 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
推荐信怎么写
2014/05/09 职场文书
感谢信模板大全
2015/01/23 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python