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><style>table {border: 1px solid black;}td {border: 1px solid black;}</style>
</head><body><div id="app"><div class="book"><div><label for="id">编号：</label><input type="text" v-model='id' v-bind:disabled="flag"><label for="name">名称：</label><input type="text" v-model='name'><button @click='add'>提交</button></div></div><table cellspacing="0"><tr><td>编号</td><td>名称</td><td>时间</td><td>操作</td></tr><tr v-bind:key="item.id" v-for="item in books"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td><a href="" v-on:click.prevent="delete1(item.id)">删除</a><span>|</span><a href="" v-on:click.prevent="xg(item.id)">修改</a></td></tr></table></div><script type="text/javascript" src="js/vue.js"></script><script>var vm = new Vue({el: "#app",data: {id: "",name: "",flag: false,books: [{id: 1,name: "三国演义",date: "10-1"}, {id: 2,name: "水浒传",date: "10-1"}, {id: 3,name: "红楼梦",date: "10-1"}]},methods: {add: function() {if (this.flag) {this.books.some(arr => {console.log(this)if (arr.id == this.id) {arr.name = this.name;}});this.flag = false;this.id = "";this.name = ""} else {var book = {};book.id = this.id;book.name = this.name;book.date = "";this.books.push(book);this.id = "";this.name = ""}},xg: function(a) {var book = this.books.filter(function(val) {console.log(this.name);return val.id == a;})console.log(book);this.id = book[0].id;this.name = book[0].name;this.flag = true;},delete1: function(id) {this.books = this.books.filter(function(item) {return item.id != id;});},deleteBook: function(id) {this.books = this.books.filter(function(item) {return item.id != id;});}}})</script>
</body></html>