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样式 谷歌百 ...
随机推荐
- SSL及TLS
SSL SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议. ...
- hotspot 线程状态
- eslint 检查单个文件的错误
问题: 批量检查时,没有针对性,想针对单个文件进行检查 解决办法:./node_modules/.bin/eslint your file
- 阶段3 3.SpringMVC·_04.SpringMVC返回值类型及响应数据类型_4 响应之返回值是ModelAndView类型
ModelAndView是SpringMvc提供的一个对象 ModelAndView底层源码用也是ModelMap.ModelMap实现过Model的接口 ModelAndView可以直接new出来. ...
- hashcat 密码破解工具 使用教程
日期:2019-08-16 15:03:12 更新: 作者:Bay0net 介绍:记录一下 hashcat 的使用命令 0x01.Install Hashcat Wiki - FAQ Github - ...
- 根据XML文件 生成 java类
最近一直在做关于webservice 的项目,这种项目最麻烦的就是根据对方的要求产生XML,文档里面虽然有XML结构,但是要转化为java里面的实体实在费劲, 有个自动化的工具就好了,半自动化也好,省 ...
- mysql双主架构
注意:最好不要用innodedb来同步数据库,要用databus来同步数据库,数据量大要用上mycat中间件 Mysql主主同步环境部署: centos 7.4 三台云主机: mysql1 :10.1 ...
- GPU编程shader之正余弦波和幂/指数函数
先上一个demo代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- gin框架教程三：JWT的使用
JWT介绍 JWT (JSON Web Token) 是一种规范.这个规范允许我们使用JWT在用户和服务器之间安全传递信息. JWT的组成: jwt分3个部分,Header 头部.Payload 载荷 ...
- 外连接的用法 -- 《SQL进阶教程》 jupyter note
import pandas as pd import sqlite3 conn = sqlite3.connect('1-5.db') 用外连接进行行列转换1(行 -> 列): 制作交叉表 怎么 ...