Vue中全局过滤器期与局部过滤器期的使用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
{{dt | dateFormat('') }}
</div> <div id="app2">
{{dt | dateFormat('') }}
</div> <script>
//全局过滤器，进行时间的格式化
Vue.filter('dateFormat', function (dateSter, pattern) {
//根据给定的时间字符串，得到特定的时间
var dt = new Date(dateSter)
//yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate() //return y + '-' + m + '-' + d if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
var vm = new Vue({
el: '#app',
data: {
dt: new Date()
},
}) var vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
methods: {
show(){
console.log('执行show方法')
}
},
beforeCreate() {
//这是遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
//注意：在beforeCreate 生命周期函数执行的时候， data 和 methods 中的 数据都还没有初始化
console.log(this.dt); },
created() {
//这是遇到的第二个生命周期函数
//在created 中 data 和 methods 都已初始化好了
//如果要调用 methods 中的方法， 或者操作 data 中的数据，最早，只能在 created 中操作
console.log(this.dt); },
beforeMount() {
//这是遇到第三个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
//在beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
console.log(this.dt); },
mounted() {
//这是遇到的第四个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户可以看到渲染好的页面
//注意：mounted 是 实例创建的最后一个生命周期函数， 执行 mounted 就表示 ， 实例已经被完全创建好了
console.log(this.dt); },
beforeUpdate() {
//这个时候，表示，我们的界面还没有被更新 数据被更新
//当执行beforeUpdate的时候，页面中的显示数据 还是旧的 此时 data 中的数据是最新的， 页面尚未和最新的数据同步
console.log(this.dt); },
updated() {
//updated 事件 执行的时候 ， 页面和data的数据已经保持同步了 都是最新的数据
console.log(this.dt); },
beforeDestroy() {
//当执行 beforeDestroy 钩子函数的时候，vue 实例就已经从运行阶段进入了销毁的阶段
//实例身上所有的data和所有的methods，以及过滤器 指令。。。。都处于可用状态，此时，还有没真正执行销毁的过程
},
destroyed() {
//组件已经完全销毁，此时 组件中所有的 数据，方法，指令，过滤器.....都已近不可用了
},
filters: {
//私有过滤器有两个条件【过滤器名称 和 处理函数】
//过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器
dateFormat: function (dateSter, pattern = '') {
var dt = new Date(dateSter)
var y = dt.getFullYear()//年
var m = (dt.getMonth() + 1).toString().padStart(2,'0')//月
var d = dt.getDate().toString().padStart(2,'0')//日 //return y + '-' + m + '-' + d if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours().toString().padStart(2,'0')//时
var mm = dt.getMinutes().toString().padStart(2,'0')//分
var ss = dt.getSeconds().toString().padStart(2,'0')//秒
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
}
}) </script>
</body> </html>
Vue中全局过滤器期与局部过滤器期的使用的更多相关文章
- 黑马vue---28、vue中全局过滤器的基本使用
黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...
- vue 中全局filter过滤器的配置及使用
在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...
- vue中全局引入bootstrap.css
1.首先在官网上下载bootstrap的压缩包(必须是官网上下载的) 将压缩包解压后引入在项目文件夹下面.如下图所示: 2.在main.js中引入 import './assets/bootstrap ...
- 第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue中全局组件与局部组件的注册，以及动态绑定props值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中全局filter和局部filter怎么用?
需求: 将价值上加上元单位符号(全局filter) <template> <div> 衣服价格:{{productPrice|formatTime}} </div> ...
- Vue中全局导入和按需导入的区别
export {router} //按需导出 import {router} from './router' //按需导入路由模块 export default //全局导出store模块 store ...
- Vue中全局监听键盘事件
全局监听enter键,是把监听事件绑定到document上 常用的keyCode键盘编码在这里:https://www.cnblogs.com/wbyixx/p/12029508.html creat ...
- vue中全局/按需引用element，样式都不生效
简直是天坑啊,这个问题困扰了我一个晚上加今天一天,心里无数草泥马奔腾 被要求使用vue1.0+elementUI做一个后台管理项目,结果无论怎么操作elementUI,页面中都不显示css样式 谷歌百 ...
随机推荐
- leetcode探索中级算法
leetcode探索中级答案汇总: https://leetcode-cn.com/explore/interview/card/top-interview-questions-medium/ 1)数 ...
- Java快排
package quickSort; /** * 快速排序 * @author root * */ public class QuickSort { static int[] data = {0,2, ...
- 自定义application的全局捕获异常实现
package com.loaderman.global; import android.app.Application; import android.os.Environment; import ...
- JAVA记事本的图形用户界面应用程序含过滤
JAVA记事本的图形用户界面应用程序 过滤 题目简介: 整体分析: 实验代码: package note; import java.awt.EventQueue; import java.awt.ev ...
- SQL学习（五）多表关联-join
在实际工作中会用到多表联查,此时需要用到关键字JOIN 一.inner join(内连接) 至少有一个匹配时返回行,只返回两个表中连接字段相等的行 如: select * from ticket in ...
- python 类中__getattr__的使用
class F: def __init__(self, name): self.name = name def __getattr__(self, item): return '__getattr__ ...
- Elasticsearch mapping映射文件设置没有生效
Elasticsearch mapping映射文件设置没有生效 问题背景 我们一般会预先创建 Elasticsearch index的 mapping.properties 文件(类似于MySQL中的 ...
- SELECT * 测试
描述 大家通常禁止在生产环境直接使用select * 已成常识了,也常常在开发规范中就会规定不允许直接使用select *,那么我们为什么不允许使用select * ,在一些什么场景下select * ...
- PropertyValuesProvider在日期绑定和校验中的应用
Github地址:https://github.com/andyslin/spring-ext 编译.运行环境:JDK 8 + Maven 3 + IDEA + Lombok spring-boot: ...
- 【AMAD】dogpile.cache -- 一个Python缓存API，提供一套通用的接口来适配不同的缓存后端
简介 动机 作用 用法 个人评分 简介 Dogpile1由两套子系统组成,其中一个是基于另一个来构建的. dogpile提供了dogpile lock的概念,这个控制结构让一个线程可以被选为一些资源的 ...