vue2 v-model/v-text 中使用过滤器的方法示例

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue学习笔记之指令v-text && v-html && v-bind详解

    vue学习笔记之指令v-text && v-html && v-bind详解

    一 : 指令的概念: 指令是vue自定义的以v-开头的自定义属性.每个不同的属性都有各自不同的意义和功能 二 : 指令的语法: v-指令名 = "表达式判断或者是业务模型中属性名或者事件名" 三 : 具体指令 1. v-text 作用 : 操作元素中的纯文本 快捷方式 : {{}} 栗子1 简写形式:将v-text=""换成{{}} <div id="app"> {{ message }} </div> var app =

  • vue中v-text / v-html使用实例代码详解

    废话少说,代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例中的数据,事件和方法</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><

  • vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

    vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

    本文实例讲述了vue防止花括号{{}}闪烁v-text和v-html.v-cloak用法.分享给大家供大家参考,具体如下: 一.v-text和v-html <span>{{msg}}</span>  -->     v-text {{{msg}}}      -->    v-html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

  • vue 插值 v-once,v-text, v-html详解

    vue 插值 v-once,v-text, v-html详解

    引入Vue.js ,通过script形式,vue官网语法记录 创建vue应用,数据和 DOM 已经被建立了关联,所有东西都是响应式的 1:插值 缺点:让你的网速慢,或者数据加载失败时,会在浏览器中直接渲染插值[js禁用,javascript报错也会导致这个问题] html: <section id="content"> <p id="Mustache">没有v-once, {{msg}}</p> </section>

  • vue2 v-model/v-text 中使用过滤器的方法示例

    Vue.js 允许自定义过滤器,一般可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 v-bind 中 --> <div v-bind:id="rawId | formatId"></div> 可以在一

  • Java读取PDF中的表格的方法示例

    Java读取PDF中的表格的方法示例

    目录 一.概述 ​二.环境配置 1. 手动导入 2. Maven仓库下载导入 三.读取PDF中的表格 一.概述 本文以Java示例展示读取PDF中的表格的方法.这里导入Spire.PDF for Javah中的jar包,并使用其提供的相关及方法来实现获取表格中的文本内容.下表中整理了本次代码使用到的主要类.方法及解释,供参考: 类型 描述 PdfDocument Class Represents a pdf document model. PdfDocument. loadFromFile (s

  • Go语言中节省内存技巧方法示例

    目录 引言 预先分配切片 结果 结构体中的字段顺序 极端情况 使用 map[string]struct{} 而不是 map[string]bool 结果 引言 GO虽然不消耗大量内存,但是仍有一些小技巧可以节省内存,良好的编码习惯是每一个程序员都应该具备的素质. 预先分配切片 数组是具有连续内存的相同类型的集合.数组类型定义时要指定长度和元素类型. 因为数组的长度是它们类型的一部分,数组的主要问题是它们大小固定,不能调整. 与数组类型不同,切片类型无需指定长度.切片的声明方式与数组相同,但没有数

  • SpringBoot 中使用JSP的方法示例

    SpringBoot 中使用JSP的方法示例

    本文介绍了SpringBoot 中使用JSP的方法示例,分享给大家,具体如下: 依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.1.RELEASE</version> <relativePath/> <!-- l

  • SpringBoot中整合MyBatis-Plus的方法示例

    MyBatis 框架相信大家都用过,虽然 MyBatis 可以直接在 xml 中通过 SQL 语句操作数据库,很是灵活.但正其操作都要通过 SQL 语句进行,就必须写大量的 xml 文件,很是麻烦.于是 MyBatis-Plus 应运而生,作为 MyBatis 的增强工具,更是为我们开发效率得到了质的飞跃. 一.简介 1.MyBatis MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工

  • Linux中在防火墙中开启80端口方法示例

    linux如果刚安装好防火墙时我们常用的端口是没有增加的,也就是说不能访问,那么要怎么把常用端口增加到防火墙通过状态呢,下面我们以80端口为例子吧. 最近自己在学习Linux.搭建一个LNMP环境.在测试时一切都好.然后重启Linux后.再次访问网站无法打开.最终原因是在防火墙中没有加入 80 端口的规则.具体方法如下: 在CentOS下配置iptables防火墙,是非常必要的.来我们学习如何配置!,其它版本一下: 1.打开iptables的配置文件: 代码如下 vi /etc/sysconfi

  • 在Python中使用gRPC的方法示例

    本文介绍了在Python中使用gRPC的方法示例,分享给大家,具体如下: 使用Protocol Buffers的跨平台RPC系统. 安装 使用 pip pip install grpcio pip install grpcio-tools googleapis-common-protos gRPC由两个部分构成,grpcio 和 gRPC 工具, 后者是编译 protocol buffer 以及提供生成代码的插件. 使用 编写protocol buffer 使用 gRPC 首先需要做的是设计 p

  • Go语言中的字符串处理方法示例详解

    1 概述 字符串,string,一串固定长度的字符连接起来的字符集合.Go语言的字符串是使用UTF-8编码的.UTF-8是Unicode的实现方式之一. Go语言原生支持字符串.使用双引号("")或反引号(``)定义. 双引号:"", 用于单行字符串. 反引号:``,用于定义多行字符串,内部会原样解析. 示例: // 单行 "心有猛虎,细嗅蔷薇" // 多行 ` 大风歌 大风起兮云飞扬. 威加海内兮归故乡. 安得猛士兮守四方! ` 字符串支持转义

  • 在Angular中使用JWT认证方法示例

    本文介绍了在Angular中使用JWT认证方法示例,分享给大家,具体如下: 项目地址: grading-system 基于session的认证和基于token的认证的方式已经被广泛使用.在session认证中,服务端会存储一份用户登录信息,这份登录信息会在响应时传递给浏览器并保存为Cookie,在下次请求时,会带上这份登录信息,这样就能识别请求来自哪个用户. 在基于session的认证中,每个用户都要生成一份session,这份session通常保存在内存中,随着用户量的增加,服务端的开销会增大

  • idea中lombok启用的方法示例

    IDEA(版本:2020.1)中使用 lombok 有几个以下前提: 1. IDEA 安装了 lombok 插件,具体安装方法如下:File => Settings => Plugins => Marketplace.在 Marketplace 中搜索 lombok 并安装,安装成功后 lombok 会显示在 installed 标签下(如下图) 2. 启用了 Annotation processing,启用方法:File => Settings => Build, Exec

随机推荐