账本管理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()+1var 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+1var 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;}})},search(keywords) {return this.list.filter(item =>{if (item.name.includes(keywords)) {return item}})}}});</script>
</body>
</html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
