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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
工厂保安员岗位职责
2014/01/31 职场文书
便利店投资创业计划书
2014/02/08 职场文书
揭牌仪式主持词
2014/03/19 职场文书
物流管理专业推荐信
2014/09/06 职场文书
学习与创新自我评价
2015/03/09 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
python非标准时间的转换
2021/07/25 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript