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样式 谷歌百 ...
随机推荐
- 在jenkins打开roboframework报告:Opening Robot Framework report failed
来源自: https://blog.51cto.com/icestick8586/1884615 --------------------------------------------------- ...
- 报错：SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry 'admin' for key 'username'
在提交注册信息的时候报错:SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry 'admin' for key ' ...
- 收集的21个优秀的学习资源Kotlin
一.教程 1.The Kotlin Website Kotlin 官方网站(英文) 2.Kotlin editor Kotlin 在线编辑器 3.Keddit:在开发Android应用程序时学习K ...
- Java 谷歌浏览器开发必备插件
1.谷歌访问助手 下载网址:http://www.ggfwzs.com/ 2.Json Viewer 格式化请求接口,返回Json数据格式,可以在浏览器展示 3.Restlet client 一种类似 ...
- [redis]redis实现分页的方法
每个主题下的用户的评论组装好写入Redis中,每个主题会有一个topicId,每一条评论会和topicId关联起来,大致的数据模型如下:{ topicId: 'xxxxxxxx', comments: ...
- delphi 权限控制(delphi TActionList方案)
在软件开发中,为软件加入权限控制功能,使不同的用户有不同的使用权限,是非常重要的一项功能,由其在开发数据库方面的应用,这项功能更为重要.但是,要为一个应用加入全面的权限控制功能,又怎样实现呢?大家知道 ...
- HTTP请求的python实现（urlopen、headers处理、 Cookie处理、设置Timeout超时、 重定向、Proxy的设置）
python实现HTTP请求的三中方式:urllib2/urllib.httplib/urllib 以及Requests urllib2/urllib实现 urllib2和urllib是python两 ...
- 【.NET】CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\d29b5393\123c3a1c\App_Code.odl3w4o6.dll”--“拒绝访问。 ”
IIS部署网站或者Webservice时,出现以下问题: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Tempor ...
- 【.NET】关于.NET前后台提示框的那点事
前言 关于提示框,或多或少都用到过,提示框常见方式两种:js原生alert() 和 div模拟弹层:下面以一个常见的需求业务场景来展现提示框的那点事: 正文内容 客户:需求方: 小白:实现方(全权负责 ...
- ASP.NET(C#) 使用 SqlBulkCopy 实现批量插入SQL（快捷简单）
业务需要,系统在处理数据时,每暂存一列数据将他插入到右侧的表格中,再执行批量保存,如图所示: //以前的做法可能是生成一堆 insert into xx values xxx 的sql语句,在程序中去 ...