vue学习笔记之过滤器的基本使用方法实例分析

本文实例讲述了vue学习笔记之过滤器的基本使用方法。分享给大家供大家参考，具体如下：

以下是一个将浏览器默认时间格式格式化的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过滤器</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- | 是管道符，可以对前面的数据进行过滤，一般用于格式化数据，eg,货币（1,000,000）-->
<div id="root">
  {{date | formatDate}}
</div>
<script>
  // 在时间小于10前补0
  var padDate = function (value) {
    return value < 10 ? '0' + value : value;
  }
  var app = new Vue({
    el: "#root",
    data: {
      date: new Date()
    },
    /*过滤器*/
    filters: {
      formatDate: function (value) {
        var date = new Date(value);
        var year = date.getFullYear();
        var month = padDate(date.getMonth());
        var day = padDate(date.getDay());
        var hour = padDate(date.getHours());
        var minutes = padDate(date.getMinutes());
        var seconds = padDate(date.getSeconds());
        return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
      }
    },
    /*挂载完成，html页面渲染完毕，一半做一些Ajax操作，只执行一次*/
    mounted: function () {
      var _this = this;
      this.timer = setInterval(function () {
        _this.date = new Date();
      }, 1000);
    },
    beforeDestory: function () {
      if (this.timer) {
        clearInterval(this.timer);// 在vue实例销毁前清楚定时器
      }
    }
  })
</script>
</body>
</html>
  • 在vue中使用过滤器，要注意！只是改变了在前端页面渲染的格式，而不会改变数据的存储的格式
  • 全局过滤器定义必须始终位于Vue实例之上，否则你将会得到一个“Failed to resolve filter: XXX”的错误信息。
  • 过滤器串联
{{text | filter1 | filter2}}
  • 过滤器接受参数 【js中接受的参数，第一个始终是value，传入的参数是第2，3，4....个参数】
{{text | filter('arg1','arg2')}}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

赞 (0)

相关推荐

  • Vue 过滤器filters及基本用法

    Vue 过滤器filters及基本用法

    1.示例代码 采用vue单文件组件,使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { dat

  • Vue.js学习之过滤器详解

    前言 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.阅读这这篇文中的前提是你对Vue已经有了基本的语法基础. Vue.Js中的过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' upper

  • Vue.js -- 过滤器使用总结

    过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器. VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤.接下来,我们可以想象一个比较简单的例子,使用了Vue的 filterBy +

  • Vue自定义过滤器格式化数字三位加一逗号实现代码

    Vue自定义过滤器格式化数字三位加一逗号实现代码

    前端处理一些金额,数字类的数据要求按照固定的格式显示,比如9,527,025,或者带有小数(如1,587.23)仍要三位一断.有些话也不必多说,既然要求如此,实现呗. 作为前端主流框架之一的Vue,类似的功能肯定都有人写的很完善了.我呢,最讨厌不动脑筋去网上找现成的,所以我自己写了一个.话不多说,先放效果图再贴代码(为了展现思路,我面向过程写的,另外这个是针对保留两位小数的数字进行过滤,因为保留整数的太简单了). <!DOCTYPE html> <html> <head>

  • vue2.0 自定义日期时间过滤器

    方法一: // template {{a | data}} //script data:{ a: Date.now() } filters: { data:function (input) { var d = new Date(input); var year = d.getFullYear(); var month = d.getMonth() + 1; var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate(); var

  • Vue实现自带的过滤器实例

    一 过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自带的过滤器</title> <meta name="viewport" content="width=device-width,i

  • Vue.js每天必学之过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse">&

  • Vue过滤器的用法和自定义过滤器使用

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{msg | myfilter | myfilternumber }} 2.自定义的过滤器 过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值.a是自定义的一个参数. 自定义过滤器的例子: <!DO

  • 详解Vue自定义过滤器的实现

    一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理 <!DOCTYPE html> <html> <head> <meta charset=&qu

  • vue学习笔记之过滤器的基本使用方法实例分析

    本文实例讲述了vue学习笔记之过滤器的基本使用方法.分享给大家供大家参考,具体如下: 以下是一个将浏览器默认时间格式格式化的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤器</title> <script src="https://cdn.jsdelivr.net/npm/v

  • Vue学习笔记进阶篇之函数化组件解析

    Vue学习笔记进阶篇之函数化组件解析

    这两天学习了Vue.js 感觉函数化组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 介绍 之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法.它只是一个接收参数的函数. 在这个例子中,我们标记组件为 functional, 这意味它是无状态(没有 data),无实例(没有 this 上下文). 一个 函数化组件 就像这样: Vue.component('my-component', { functional: true, // 为了弥补缺少的

  • Vue学习笔记进阶篇之vue-router安装及使用方法

    Vue学习笔记进阶篇之vue-router安装及使用方法

    介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文是基于上一篇文章(Vue学习笔记进阶篇--vue-cli安装及介绍)vue-cli脚手架工具的. 安装 在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里

  • vue学习笔记之vue1.0和vue2.0的区别介绍

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> VUE2.0:必须有根元素,包裹住所有的代码 <template id="aaa"> <div> <h3>我是组件</h3> <

  • vue学习笔记之slot插槽基本用法实例分析

    本文实例讲述了vue学习笔记之slot插槽基本用法.分享给大家供大家参考,具体如下: 不使用插槽,在template中用v-html解析父组件传来的带有标签的content <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vu

  • vue学习笔记之作用域插槽实例分析

    本文实例讲述了vue学习笔记之作用域插槽.分享给大家供大家参考,具体如下: <child></child> Vue.component('child', { data: function () { return { list: [1, 2, 3] } }, template: '<div> <ul> <li v-for="item of list">{{item}}</li> </ul> </di

  • vue学习笔记之给组件绑定原生事件操作示例

    本文实例讲述了vue学习笔记之给组件绑定原生事件操作.分享给大家供大家参考,具体如下: 当在父组件中定义一个点击事件,并且在父组件的methods中定义了这个点击事件时,在页面上点击并不会有什么反应.那么该怎么办呢? 我们可以在子组件的template中的dom上定义一个点击事件(原生事件),并且在子组件的methods中定义该点击事件,然而点击页面时也只会alert(child click ). 这是为什么呢?父组件的点击事件被vue当成自定义事件,点击后没有检测到,这时需要子组件向父组件触发

  • Ajax学习笔记---3种Ajax的实现方法【推荐】

    Ajax学习笔记---3种Ajax的实现方法【推荐】

    Ajax:  Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. (一) Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司

  • JS学习笔记之贪吃蛇小游戏demo实例详解

    本文实例讲述了JS学习笔记之贪吃蛇小游戏demo实例.分享给大家供大家参考,具体如下: 最近跟着视频教程打了一个贪吃蛇, 来记录一下实现思路, 先上代码 静态页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>贪吃蛇</title> </head> <style> *{ mar

  • laravel框架学习笔记之组件化开发实现方法

    本文实例讲述了laravel框架学习笔记之组件化开发实现方法.分享给大家供大家参考,具体如下: 1.第一个难点,就是把本地的组件引入到项目中,进行开发和测试,这个已经解决了 2.就是需要发布组件中的配置文件到项目中 3.就是怎么在组建中加载组建中的视图view层 视图 你需要告诉 laravel 视图的位置才能使 laravel 加载包中的视图.你可以通过服务提供者的 loadViewsFrom 方法.loadViewsFrom 方法接受两个参数:视图的路径和包的名称.比如,如果你的包名称是"c

随机推荐