vuejs小综合作业

不想成小白

已于 2022-11-10 15:33:37 修改

阅读量277

点赞数

文章标签： vue.js javascript html

于 2022-11-09 10:03:37 首次发布

本文链接：https://blog.csdn.net/qq_63167889/article/details/127764185

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="vue.js"></script>
<style>
table{
border-collapse:collapse;
border:1px solid #f3dcab;
width: 560px;
}
td,th{
border:1px solid #f3dcab;
text-align:center;
height: 35px;
}
.td1{
width: 70px;
}
.td2{
width: 150px;
}
.td3{
width: 170px;
}
h1{
width: 560px;
text-align:center;
}
.title,th{
background-color:#f3dcab;
}
.title{
border-bottom:1px solid #d1d99f;
}
</style>
</head>
<body>
<div id="app">
<h1>图书管理</h1>
<table>
<tr>
<td class="title" colspan="4">
编号:<input type="text" v-model="bookId">
名称:<input type="text" v-model="name">
<input type="button" value="提交" @click="submit()">
</td>
</tr>
<tr>
<th class="td1">编号</th>
<th class="td2">名称</th>
<th class="td3">时间</th>
<th>操作</th>
</tr>
<tr v-for="(v,i) in booklist">
<td>{{v.id}}</td>
<td>{{v.bookname}}</td>
<td>{{v.bookdate}}</td>
<td><a href="" @click.prevent="change(i)">修改</a> | <a href="" @click.prevent="dele(i)">删除</a></td>
</tr>
</table>
<p>图书总数{{totalbook}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
bookId:'',
name:'',
booklist:[
{id:1,bookname:'三国演义',bookdate:'2018-01-01'},
{id:2,bookname:'水浒传',bookdate:'2018-01-01'},
{id:3,bookname:'红楼梦',bookdate:'2018-01-01'},
{id:4,bookname:'西游记',bookdate:'2018-01-01'},
]
},
methods: {
submit:function(){
if(this.bookId == '' || this.name == ''){
alert('您输入的信息不完整')
}else{
let d=new Date()
d=d.toLocaleDateString()
this.booklist.push({id:this.bookId,bookname:this.name,bookdate:d})
this.bookId='',
this.name=''
}

},
change:function(idx){
let id_Pro = prompt('请输入新的编号:')
let name_Pro = prompt('请输入新的名称:')
if(id_Pro=='' || name_Pro== ''){
alert('输入有误，请重新修改！')
}else{
let d=new Date()
d=d.toLocaleDateString()
let obj={id:id_Pro,bookname:name_Pro,bookdate:d}
this.booklist.splice(idx,1,obj)
}
},
dele:function(idx){
if(confirm('您确定要删除吗？')){
this.booklist.splice(idx,1)
}

},
},
computed:{
totalbook:function(){
return this.booklist.length
}
},
watch:{
name:function(){
for(var i=0;i<this.booklist.length;i++){
if(this.booklist[i].bookname == this.name){
alert('重复添加书籍')
this.name=''
}
}
}
}