[其他]代码库
<!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>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="js/vue.js"></script>
</head>
<body>
<!-- 鏁翠綋椤甸潰甯冨眬 -->
<div class="container" id="app">
<!-- 涓婇潰锛?闈㈡澘鍜岃〃鍗?->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">娣诲姞鏂板浘涔?/h3>
</div>
<div class="panel-body">
<!-- 琛ㄥ崟 -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">涔﹀悕</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="璇疯緭鍏ヤ功鍚?
v-model="currentBook.bookname">
</div>
<div class="input-group">
<div class="input-group-addon">浣滆€?/div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="璇疯緭鍏ヤ功鍚?
v-model="currentBook.author">
</div>
<div class="input-group">
<div class="input-group-addon">鍑虹増绀?/div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="璇疯緭鍏ュ嚭鐗堢ぞ"
v-model="currentBook.publisher">
</div>
</div>
<button v-if="flag == 0" type="button" class="btn btn-primary" @click="add">娣诲姞</button>
<button v-else type="button" class="btn btn-warning" @click="updateBook">淇敼</button>
</form>
</div>
</div>
<!-- 涓嬮潰锛氳〃鏍?-->
<table class="table table-bordered">
<thead>
<tr>
<th>搴忓彿</th>
<th>涔﹀悕</th>
<th>浣滆€?/th>
<th>鍑虹増绀?/th>
<th>鎿嶄綔</th>
</tr>
</thead>
<tbody id="table_body">
<tr v-for="(item,index) in books" :key="index">
<td>{{item.id}}</td>
<td>{{item.bookname}}</td>
<td>{{item.author}}</td>
<td>{{item.publisher}}</td>
<td><button class="btn btn-danger btn-xs" @click="delIndex(index)">鍒犻櫎</button>
<button class="btn btn-warning btn-xs" @click="toEdit(index)">缂栬緫</button></td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: "#app",
data: {
books: [],
currentBook: {
bookname: '',
author: '',
publisher: ''
},
flag:0 // 0鏄坊鍔狅紝1 鏄慨鏀?
},
// 鍒涘缓鏃?
created() {
// 璋冪敤鍒濆鍖栨暟鎹?
this.initData()
},
methods: {
// 鍒濆鍖栨柟娉?
initData() {
// 妯℃嫙鏁版嵁浠庢湇鍔″櫒鑾峰彇鐨?
var data = [
{ "id": 1, "bookname": "瑗挎父璁?, "author": "鍚存壙鎭?, "publisher": "鍖椾含鍥句功鍑虹増绀? },
{ "id": 2, "bookname": "绾㈡ゼ姊?, "author": "鏇归洩鑺?, "publisher": "涓婃捣鍥句功鍑虹増绀? },
{ "id": 3, "bookname": "涓夊浗婕斾箟", "author": "缃楄疮涓?, "publisher": "鍖椾含鍥句功鍑虹増绀? },
{ "id": 379, "bookname": "姘存祾浼?, "author": "鏂借€愬旱", "publisher": "涓婃捣鍑虹増绀? }
]
this.books = data
},
delIndex(index) {
// 绗笁涓弬鏁颁笉鍐欙紝灏辨病鏈夊厓绱犳浛鎹?
this.books.splice(index, 1)
},
// 娣诲姞銆?
add() {
// 鐢熸垚id
this.currentBook.id = this.books.length + 1
console.log(this.currentBook)
// 娣诲姞鍒癰ooks
this.books.push(this.currentBook)
// 娓呯┖杈撳叆妗?
this.currentBook = {
bookname: '',
author: '',
publisher: ''
}
},
// 缂栬緫锛堝皢闇€瑕佷慨鏀圭殑鍐呭濉厖鍒拌緭鍏ユ閲岄潰锛?
toEdit(index){
// 搴忓垪鍖栧拰鍙嶅簭鍒楀寲
this.currentBook = JSON.parse(JSON.stringify(this.books[index]))
// 灏嗘寜閽慨鏀逛负 淇敼
this.flag = 1
},//
// 淇敼锛堢湡姝ｇ殑淇敼锛?
updateBook(){
// 鎵惧埌淇敼鐨勪功锛屽湪鏁扮粍閲岄潰鐨勪綅缃?
for(var i=0;i<this.books.length;i++){
// 褰撴潯浠剁浉鍚屾椂锛宨灏辨槸淇敼鐨勮繖鏈功鐨勪綅缃?
if(this.books[i].id == this.currentBook.id){
// 鏇挎崲
this.books.splice(i,1,this.currentBook)
}
}
// 娓呯┖杈撳叆妗?
this.currentBook = {
bookNmae:'',
author:'',
publisher:''
}
// 淇敼鎸夐挳銆?
this.flag = 0
}
},
})
</script>
</body>
</html>
[源代码打包下载]
会python真的可以为所欲为0(回)
8天前
这里还有人吗1(回)
193天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
418天前
鸽子
0(回)
502天前
图书管理系统.rar(免费下载)[5 次下载]
初级程序员
by: 行空者 发表于：2022-05-29 01:04:31 顶(0) | 踩(0) 回复
大发明家
回复评论