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样式 谷歌百 ...
随机推荐
- RBAC 权限模型
RBAC 0 模型 最基本的 MySQL 脚本,没有建立外键约束. /* Navicat Premium Data Transfer Source Server Type : MySQL Source ...
- python sqlalchemy 进行 mysql 数据库操作
1. 进行mysql数据库的创建,如果已经存在,就相当于进行数据库的连接操作 from sqlalchemy import create_engine from sqlalchemy.ext.decl ...
- js获取当前日期并格式yyy-MM-dd
//格式化日期:yyyy-MM-dd function formatDate(date) { var myyear = date.getFullYear(); var mymonth = date.g ...
- 1、WebSphere Application Server的下载以及安装
最近在做农行相关的项目,我们的后台需要发布到农行WebSphere Application Server上,因此学习一下: 一.WebSphere 是什么? WebSphere 为 SOA (面向服务 ...
- vue路由在keep-alive下的刷新问题 对watch的影响
转载自:https://www.cnblogs.com/dansingal/p/8302100.html 问题描述: 在keep-alive中的在跳转到指定的路由时刷新对应的路由,其余不刷新. 1 2 ...
- Tree 树形控件
用清晰的层级结构展示信息,可展开或折叠. 基础用法 基础的树形结构展示. <el-tree :data="data" :props="defaultProps&qu ...
- 作为web开发人员，你必须要知道的问题！ （持续更新）
GET 和 POST 的区别 GET请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:/test/demo_form.asp?name1=value1&name2=val ...
- vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新 <template> < ...
- Java Applet基础——输出HelloWorld
前言: 我自己不专用applet,仅仅是了解一下,如果有不对的地方,还望大家多多帮助~谢谢! 一. 准备环境 1. 安装Java的编译环境(另行百度哦~) 2. 下载 applet.jar ,放在项目 ...
- flask 之(四) --- 扩展|缓存|会话
扩展 蓝图内置扩展 (实现的是路由的拆分) '''----------- app.py -------------''' from flask import Flask from users_view ...