Vue之过滤器详解

2024-09-29 21:48:56

<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h2>现在是{{fmtTime}}</h2>
        <!-- methods实现 -->
        <h2>现在是{{getFmtTime()}}</h2>
        <!-- 过滤器时间实现-->
        <h2>现在是{{time | timeFormater}}</h2>
    </div>
    <div id="root2">
        <h2>现在是：{{msg |mySlice }}</h2>
    </div>
    <script>
        Vue.config.productionTip = false;
        //全局过滤器
        Vue.filter('mySlice', function(value) {
            return value.slice(0, 4)
        })
        new Vue({
            el: "#root",
            data: {
                time: 1637047951556 //时间戳
            },
            computed: {
                fmtTime() {
                    return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss')
                }
            },
            methods: {
                getFmtTime() {
                    return dayjs(this.time).format('YYYY年MM月DD HH:mm:ss')
                }
            },
            filters: {
                timeFormater(value) {
                    return dayjs(value).format('YYYY年MM月DD HH: mm: ss ')
                }
            },
        })

        new Vue({
            el: "#root2",
            data: {
                msg: 'hello world'
            }
        })
    </script>
</body>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

vue中的过滤器实例代码详解

过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示:  {{ name | Upper }}  <div v-bind:id="martin | Upper
Vue过滤器（filter）实现及应用场景详解

1. 简单介绍 Vue.js 允许你自定义过滤器(filter),可被用于一些常见的文本格式化. 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示:  {{ message | filter }}  <div v-bind:msg="message |
详解Vue串联过滤器的使用场景

平时开发中,需要用到过滤器的地方有很多,比如单位转换.数字打点.文本格式化等,比如: Vue.filter('toThousandFilter', function (value) { if (!value) return '' value = value.toString() return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,') }) 实现效果: 30000
vue 将多个过滤器封装到一个文件中的代码详解

在这里只简单探讨关于如何将vue过滤器封装到一个文件当中,当然可以封装多个不同类型的过滤器,然后可以在需要使用过滤器的文件当中进行复用,非常的方便. 1. 首先是文件结构,首先涉及到 filters.vue (引用过滤器的文件) 文件代码: <template> <div class="chart-container"> <ul> <li v-for="texts in text" >{{texts | MoneyFo
Vue.js学习之过滤器详解

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

<body> <div id="root"> <h2>显示格式化后的时间</h2>  <h2>现在是{{fmtTime}}</h2>  <h2>现在是{{getFmtTime()}}</h2>  <h2>现在是{{time | timeFormate
Vue自定义事件(详解)

前面的话父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件事件绑定每个 Vue 实例都实现了事件接口 (Events interface),即使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是 $on 和 $emit 不是addEventListener 和 disp
Vue渲染函数详解

前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器.本文将详细介绍Vue渲染函数引入下面是一个例子,如果要实现类似下面的效果.其中,H标签可替换 <h1> <a name="hello-world" href="#hello-world" rel="external nofol
通过npm引用的vue组件使用详解

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创
Android 限制edittext 整数和小数位数过滤器(详解)

写了一个过滤器,根据需要限制edittext输入的整数和小数位,如下代码: package allone.verbank.apad.client.component; import android.text.InputFilter; import android.text.Spanned; /** * * @Title: ComponentDigitCtrlFilter.java * @Package allone.verbank.apad.client.component * @Descrip
Vue.js用法详解

vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 前言前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: V
Vue props用法详解(小结)

Vue props用法详解组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat
node创建Vue项目步骤详解

vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟. Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用. 首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js. 如何查看node是否安装或者node版本呢? 进入cmd,输入命令 node -v,回车查看.node最好使用新一些的版本,否则后续
vue相关配置文件详解及多环境配置详细步骤

1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息.比如项目名称,项目版本,项目执行入口文件,项目贡献者等等.npm install 命令会根据这个文件下载所有依赖模块. 文件结构如下: { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsa
如何用Idea或者webstorm跑一个Vue项目(步骤详解)

现在vue.js几乎是程序员必会的前端框架啦~ 今天就学习记录一下怎么运行一个vue项目无论是Idea还是webstorm,都是一样的操作. 去网上随便找一个开源项目,以下就是操作的流程,不管是用webstorm还是idea界面都一样. 第一步:终端输入npm install命令第二步:配置这里第三步:第二步点开以后就是这个界面其中,name自己随便写 package.json的路径 scripts这里写dev还是serve,看json文件配置第四步:这就是配置文件,里面是命令第五步

Vue之过滤器详解

总结

相关推荐

随机推荐