账本管理Vue

最新推荐文章于 2024-04-28 18:24:42 发布

广东话的蛇皇

最新推荐文章于 2024-04-28 18:24:42 发布

阅读量232

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104782023

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

账本管理Vue

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, inital-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>账本</title>
	<script src="vue.js"></script>
	<link rel="stylesheet"  href="bootstrap.min.css">
</head>
<body>
	<div id="app">
		<table class="table table-bordered table-hover table-striped">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Time</th>
					<th>Cost</th>
					<th>Operation</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in search(keywords)" :key="item.id">
					<td>{{ item.id }}</td>
					<td v-text="item.name"></td>
					<td>{{ item.Time | dataFormat}}</td>
					<td><span style="color: #f40;font-weight: weight;">￥</span>{{ item.Cost }}</td>
					<td>
						<a href="" @click.prevent="del(item.id)">删除</a>
					</td>
				</tr>
			</tbody>
		</table>
	
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">添加一项新开销</h3>
			</div>
		
			<div class="panel-body form-inline">
				<label>Name:<input type="text" class="form-control" v-model="name"></label>
				<label>Cost:<input type="text" class="form-control" v-model="cost"></label>
				<input type="button" value="添加" class="btn btn-primary" @click="add()">
			</div>
		</div>
		<div style="width: 300px;margin: 0 auto">
			<label>请输入搜索的关键字:<input type="text" class="form-control" v-model="keywords"></label>
		</div>
	</div>
	<script> 
		Vue.filter('dataFormat', function(dataStr){
			var dt = new Date(dataStr)
			var y = dt.getFullYear()
			var m = dt.getMonth()+1
			var d = dt.getDate()
			return `${y}-${m}-${d}`
		})
		var vm = new Vue({
			el:'#app',
			data:{
				keywords:'',
				id:'',
				name:'',
				cost:'',
				list: [
					{ id : 1 , name: '早餐' ,Time: new Date() ,Cost: 4},
					{ id : 2 , name: '午餐' ,Time: new Date() ,Cost: 20},
					{ id : 3 , name: '下午茶' ,Time: new Date() ,Cost: 30},
					{ id : 4 , name: '晚餐' ,Time: new Date() ,Cost: 60},
					{ id : 5 , name: '宵夜' ,Time: new Date() ,Cost: 30}
				]
			},
			methods:{
				add() {
					this.id = this.list.slice(-1)[0].id+1
					var pay = {id: this.id, name: this.name, Time: new Date() ,Cost: this.cost}
					this.list.push(pay)
					this.cost = this.name = ''
				},
				del(id){
					this.list.some((item, i) => {
						if (item.id == id) {
							this.list.splice(i, 1)
							return true;//在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
						}
					})
				},
				search(keywords) {
					return this.list.filter(item =>{
						if (item.name.includes(keywords)) {//es6的字符串方法，验证是否包含包含
							return item
						}
					})
				}
			}
		});
	</script>
</body>
</html>

广东话的蛇皇

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
账本管理Vue

账本管理Vue<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <meta http-equiv="X-UA...
复制链接

扫一扫