案例:过滤器中使用dayjs.js格式化时间

m0_63400611

已于 2022-05-18 16:31:13 修改

阅读量129

点赞数

分类专栏： Vue 文章标签： javascript vue.js html

于 2022-05-11 15:38:23 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/124711558

版权

Vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

需要先引入 dayjs.js,并且在其官方文档查看使用方法

代码

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>品牌列表案例</title>
		<link rel="stylesheet" href="./lib/bootstrap.css">
		<link rel="stylesheet" href="./css/brandlist.css">
	</head>

	<body>

		<div id="app">
			<!-- 卡片区域 -->
			<div class="card">
				<div class="card-header">
					添加品牌
				</div>
				<div class="card-body">
					<!-- 添加品牌的表单区域 -->
					<!-- form 表单元素有 submit 事件 -->
					<form @submit.prevent="add">
						<div class="form-row align-items-center">
							<div class="col-auto">
								<div class="input-group mb-2">
									<div class="input-group-prepend">
										<div class="input-group-text">品牌名称</div>
									</div>
									<input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brand">
								</div>
							</div>
							<div class="col-auto">
								<button type="submit" class="btn btn-primary mb-2">添加</button>
							</div>
						</div>
					</form>
				</div>
			</div>

			<!-- 表格区域 -->
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th scope="col">#</th>
						<th scope="col">品牌名称</th>
						<th scope="col">状态</th>
						<th scope="col">创建时间</th>
						<th scope="col">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in list" :key="item.id">
						<td>{{ item.id }}</td>
						<td>{{ item.name }}</td>
						<td>
							<div class="custom-control custom-switch">
								<!-- 使用 v-model 实现双向数据绑定 -->
								<input type="checkbox" class="custom-control-input" :id="'cb' + item.id"
									v-model="item.status">
								<!-- 使用 v-if 结合 v-else 实现按需渲染 -->
								<label class="custom-control-label" :for="'cb' + item.id" v-if="item.status">已启用</label>
								<label class="custom-control-label" :for="'cb' + item.id" v-else>已禁用</label>
							</div>
						</td>
						<td>{{ item.time | dateFormat }}</td>
						<td>
							<a href="javascript:;" @click="remove(item.id)">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="./lib/dayjs.min.js"></script>
		<script src="./lib/vue-2.6.12.js"></script>
		<script>
			//声明格式化时间的全局过滤器
			Vue.filter('dateFormat', (time) => {
				//对 time 进行格式化处理 得到(YYYY-MM-DD HH:mm:ss)
				//return 格式化的结果
				//直接调用 dayjs() 得到的是当前时间
				//dayjs(给定的日期时间) 得到的是指定时间
				return dayjs(time).format("YYYY-MM-DD HH:mm:ss")
			})

			const vm = new Vue({
				el: '#app',
				data: {
					// 用户输入的品牌名称
					brand: '',
					// nextId 是下一个，可用的 id
					nextId: 4,
					// 品牌的列表数据
					list: [{
							id: 1,
							name: '宝马',
							status: true,
							time: new Date()
						},
						{
							id: 2,
							name: '奔驰',
							status: false,
							time: new Date()
						},
						{
							id: 3,
							name: '奥迪',
							status: true,
							time: new Date()
						},
					],
				},
				methods: {
					//点击链接删除对应的品牌
					remove(id) {
						// console.log(id);
						this.list = this.list.filter(item => item.id !== id)
					},
					//阻止表单的默认提交行为之后,触发add方法
					add() {
						if (this.brand === '') return alert('必须填写品牌名称!')
						//先把要添加的品牌对象 整理出来
						const obj = {
							id: this.nextId,
							name: this.brand,
							status: true,
							time: new Date()
						}
						//往 this.list 数组中 push 步骤1得到的对象
						this.list.push(obj)
						//清空 this.brand 让 this.nextId 自增 +1
						this.brand = ''
						this.nextId += 1
					}
				},
			})
		</script>
	</body>

</html>

m0_63400611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例:过滤器中使用dayjs.js格式化时间

需要先引入 dayjs.js,并且在其官方文档查看使用方法代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫