Vue过滤器(时间戳转时间)

这篇具有很好参考价值的文章主要介绍了Vue过滤器(时间戳转时间)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

过滤器

 HTML写法:

定义过滤器:

 定义全局过滤器:

过滤器串联:

 带参数过滤器:

时间戳转时间


过滤器

官方地址:过滤器 — Vue.js (vuejs.org)

过滤器是指Vue.js支持在{{}}插值的尾部添加一个管道符“(|)”对数据进行过滤,

经常用于格式化文本,比如字母的大写、货币的千位使用、逗号分隔、转换时间等 

 HTML写法:

在双花括号中

{{ name | chilema }}

在 `v-bind` 中,从2.1.0后 开始支持

<div v-bind:id="rawId | formatId"></div>

定义过滤器:

使用filters关键字来定义过滤器

这里定义的过滤器为局部过滤器,在哪定义,在哪使用。

代码实例: 

chilema方法中的value参数是双花括号中 | 左边的值

切记如果return没写,浏览器中将会什么都不会显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{name|chilema}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app=new Vue({
        el:"#app",//绑定一个元素
        data() {
            return {
                name:"张三"
            }
        },
        filters:{
            chilema(value){
                return value+",你吃了吗"
            }
        }
    })
</script>
</html>

浏览器输出结果:

Vue过滤器(时间戳转时间),vue,vue.js,前端,javascript

 定义全局过滤器:

 全局的过滤器用的不多,但是根据不同情况使用

 代码实例: 

当全局过滤器和局部过滤器重名时,会采用局部过滤器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{name|helema}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    Vue.filter("helema",function(value){
        return value+",你喝了吗"
    })
    var app=new Vue({
        el:"#app",//绑定一个元素
        data() {
            return {
                name:"张三"
            }
        },
        filters:{
            chilema(value){
                return value+",你吃了吗"
            }
        }
    })
</script>
</html>

浏览器输出结果:

Vue过滤器(时间戳转时间),vue,vue.js,前端,javascript

过滤器串联:

 代码实例: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{name|chilema|helema}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    Vue.filter("helema",function(value){
        return value+",你喝了吗"
    })
    var app=new Vue({
        el:"#app",//绑定一个元素
        data() {
            return {
                name:"张三"
            }
        },
        filters:{
            chilema(value){
                return value+",你吃了吗"
            }
        }
    })
</script>
</html>

解释:

name的值将作为参数传入到chilema中,然后将chilema的结果传递到helema中

最终显示的是最后的那个过滤器

Vue过滤器(时间戳转时间),vue,vue.js,前端,javascript

 浏览器输出结果:

Vue过滤器(时间戳转时间),vue,vue.js,前端,javascript

 带参数过滤器:

{{ name | chilema('arg1', arg2) }}

chilema这是有三个参数,name会是他的第一个参数,普通字符串 'arg1' 作为第二个参数,表达式arg2的值作为第三个参数。

vue代码:

chilema(value,arg1,arg2){
    return value+",你吃了吗"
}

时间戳转时间

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{Mytime | zhuanhuanTime01}}
        <br>
        {{Mytime | zhuanhuanTime02}}
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                Mytime:new Date()
            }
        },
        filters:{
            zhuanhuanTime01(value){
                var date = new Date(value);
                Y = date.getFullYear();
                M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) ;
                D = date.getDate() ;
                h = date.getHours() ;
                m = date.getMinutes();
                s = date.getSeconds(); 
                console.log(Y+M+D+h+m+s); 
                return Y+'-'+M+'-'+D+' '+h+':'+m+':'+s;
            },
            zhuanhuanTime02(value){
                var date = new Date(value);
                Y = date.getFullYear();
                M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) ;
                D = date.getDate() ;
                h = date.getHours() ;
                m = date.getMinutes();
                s = date.getSeconds(); 
                console.log(Y+M+D+h+m+s); 
                return Y+'年'+M+'月'+D+'日 '+h+'时'+m+'分'+s+'秒';
            }
        }
    });
</script>
</html>

浏览器输出结果:

Vue过滤器(时间戳转时间),vue,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-641744.html

到了这里,关于Vue过滤器(时间戳转时间)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 之 过滤器

    过滤器本质上是一个函数,与自定义指令类似。         全局过滤器      局部过滤器 案例:将字符串首字母转换为大写字母的全局过滤器  如果换成局部过滤器   注意: 当全局过滤器和局部过滤器重名,会采用局部过滤器 与自定义命令一样,全局过滤器可以在任何

    2024年02月05日
    浏览(38)
  • Vue中过滤器如何使用?

    过滤器是对即将显示的数据做进⼀步的筛选处理,然后进⾏显示,值得注意的是过滤器并没有改变原来 的数据,只是在原数据的基础上产⽣新的数据。过滤器分全局过滤器和本地过滤器(局部过滤器)。 目录 全局过滤器 本地过滤器 过滤器传参 串联过滤器 下⾯定义⼀个全局

    2024年02月10日
    浏览(51)
  • 【Vue】收集表单数据 过滤器

    收集表单数据: 若: input type=\\\"text\\\"/ ,则v-model收集的是value值,用户输入的就是value值 若: input type=\\\"radio\\\"/ ,则v-model收集的是value值,且要给标签配置value值 若: input type=\\\"checkbox\\\"/ 1.没有配置input的value属性,那么收集的就是checked(勾选or未勾选,是布尔值) 2.配置input的value属性:

    2023年04月18日
    浏览(53)
  • 如何使用Vue模板的过滤器?

    你想要学习如何使用Vue模板的过滤器吗? 首先,让我们来看看Vue模板是什么。Vue模板就是一个用来描述组件的结构和内容的HTML代码。在Vue模板中,我们可以使用过滤器来对数据进行处理和格式化。过滤器可以让你的数据变得更加美观、易读,也可以实现一些复杂的数据处理

    2024年02月08日
    浏览(38)
  • VUE L 表单数据&过滤器 ⑨

    提示:以下是本篇文章正文内容 简介 : Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支

    2024年02月10日
    浏览(55)
  • Vue 中过滤器 filter 使用教程

    1.1 过滤器使用的背景    过滤器 提供给我们的一种 数据处理方式 。过滤器功能不是必须要使用的,因为它所实现的功能也能用 计算属性 或者 函数调用 的方式来实现。   例如我们要在页面显示格式化的时间样式,如图所示:下面三种格式化的时间格式都是由 时间戳

    2024年02月07日
    浏览(42)
  • 如何在Vue中定义和调用过滤器?

    过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式和 v-bind 属性绑定。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符”进行调用,示例代码如下: 在创建 vue 实例期间,可以在 filters 节点中定义过滤器,示例代码

    2024年02月09日
    浏览(40)
  • Vue2中过滤器的用法详解

    目录 一、过滤器的概念 二、过滤器的使用位置 三、过滤器的分类 1、全局过滤器 2、本地过滤器 四、过滤器应用实例 1、使用过滤器实现省略号 2、使用过滤器处理时间戳 五、Vue3中已废弃过滤器  过滤器 是vue中的一个特性,作用是用于对文本进行格式化的作用。分为全局过

    2024年02月07日
    浏览(42)
  • Vue.set()方法+收集表单数据+过滤器

    目录 收集表单数据 过滤器 给对象追加一个属性: Vue.set(对象,‘追加属性名’ ,\\\'追加属性值\\\') this.$set(对象,‘追加属性名’ ,\\\'追加属性值\\\') 注⚠️:对象不能是vue实例,或者vue实例的根数据对象    例子: 总结: 若:input type=\\\'text\\\' /,则v-model收集的是value值,用户输入的就

    2024年02月05日
    浏览(43)
  • Vue2-收集表单数据、过滤器、内置指令与自定义指令、Vue生命周期

    🥔:我徒越万重山 千帆过 万木自逢春 更多Vue知识请点击——Vue.js 1、不同标签的value属性 若: input type=\\\"text\\\"/ 普通输入框,则v-model收集的是value值,用户输入的就是value值。 若: input type=\\\"radio\\\"/ 单选框,则v-model收集的是value值,且要给标签配置value值。 若: input type=\\\"checkb

    2024年02月13日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包