vue基础-表格示例之过滤器格式化日期

最新推荐文章于 2024-08-26 08:59:48 发布

一杯雪花勇闯天涯

最新推荐文章于 2024-08-26 08:59:48 发布

阅读量124

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/u014265398/article/details/109171025

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue基础之表格示例之过滤器格式化日期</title>
	<style>
	        .table_box {
	            height: auto;
	            width: 90%;
	            margin: 5% auto;
	        }
	
	        .table {
	            border-collapse: collapse;
	            width: 100%;
	            height: auto;
	        }
	
	        h1 {
	            text-align: center;
	        }
			[v-cloak] {
				display: none;
			}
	    </style>
	</head>
	<body>
	<div id="app" v-cloak>
	    <div class="table_box">
	        <h1>表格练习</h1>
	        <input type="text" v-model="text"/>
	        <button @click="add">添加</button>
	        <table class="table" border="1">
	            <thead>
	            <tr>
	                <th>序号</th>
	                <th>品牌</th>
	                <th>时间</th>
	                <th>操作</th>
	            </tr>
	
	            </thead>
	            <tbody>
	            <tr v-for="(v,k) in list" :key="k">
	                <th>{{v.id}}</th>
	                <th>{{v.name}}</th>
	                <th>{{v.time |fmtDate}}</th>
	                <th>
	                    <a href="#" @click.prevent="del(k)">删除</a>
	                </th>
	            </tr>
	            </tbody>
	        </table>
	    </div>
	
	</div>
	</body>
	</html>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

	<script>
	    Vue.filter("fmtDate",function(v) {
			return moment().format('YYYY-MM-DD HH:mm:ss');
		});
	    var vm = new Vue({
	        el: '#app',
	        data: {
	            num: 1,
	            list: [],
	            text: '',
	
	        },
	        methods: {
	            add: function () {
	                this.list.unshift({
	                    "id": this.num++,
	                    "name": this.text,
	                    "time": new Date(),
	                });
	            },
	            del: function (index) {
	                if (confirm("请问您是否确定删除当前行")) {
	                    this.list.splice(index, 1);
	                }
	
	            },
	
	        }
	    });
	</script>