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 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
js实现按座位号抽奖
Apr 05 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
javascript异步编程的六种方式总结
May 17 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
php简单图像创建入门实例
2015/06/10 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
document.all与WEB标准
2020/05/13 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
Python eval函数介绍及用法
2020/11/09 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
办公室主任岗位职责
2013/11/08 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
青年志愿者活动感想
2015/08/07 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang