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样式 谷歌百 ...
随机推荐
- c++ / % 四舍五入 向上取整ceil 向下取整floor
/ % 四舍五入 向上取整ceil 向下取整floor #include <math.h> double floor(double x); float floorf(float x); ...
- Linux文件目录操作命令
ls 显示文件和目录列表 -l 列出文件的详细信息 -a 列出当前目录所有文件,包含隐藏文件 mkdir 创建目录 -p 父目录不存在情况下先生成父目录 cd 切换目录 touch 生成一个空文件 e ...
- Maven-SSM框架整合
1.创建Maven项目 配置pom.xml依赖 <!-- 允许创建jsp页面 --> <dependency> <groupId>javax.servlet< ...
- OAUTH协议介绍
OAUTH协议为用户资源的授权提供了一个安全的.开放而又简易的标准.与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可 ...
- iOS去除数组中重复的model数据
// 去除数组中model重复 ; i < self.selectedModelArray.count; i++) { ;j < self.selectedModelArray.count ...
- iOS服务器数据请求"汉字编码"问题
下面记录一下数据请求问题: 1.不知道大家有木有遇到过,当数据请求的URL带有汉字的时候,请求数据肯定会报404错误,也就是参数或者是接口URL错误<虽然说404,500等错误一般都是服务器问题 ...
- C基础知识(2)：变量&常量的定义和声明
变量定义和声明 (1) 使用int,char等类型符定义变量 使用int,char等类型符定义变量时,不管有没有指定初始值,都就已经建立了存储空间(开辟内存).内存寻址由大到小,优先分配内存地址比较大 ...
- 强大的BeautifulSoup
Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库·它能够通过你喜欢的转换器实现惯用的文档导航 安装BeautifulSoup 推荐使用Beautiful Sou ...
- 串口使用和CSerial类
1 串口通信的基本原理 串口通信中无论是写入串口还是读取串口,都是对缓冲区操作的.可以理解为写串口就是向输出缓冲区写入内容,读取串口就是从输入串口缓冲区读取内容.但是何时打开串口,何时发送数据,何时接 ...
- 前端vscode常用插件
Auto Rename Tag 这是一个html标签的插件,可以让你修改一边标签,另外一边自动改变. Beautify 格式化代码插件 Braket Pair Colorizer 给js文件中的每一个 ...