vue在表格添加一行或者删除选择的行数
html
<!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">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div id="model">
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>单价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,i) of book">
<td>{{i+1}}</td>
<td>{{v.name}}</td>
<td>{{v.author}}</td>
<td>{{v.price}}</td>
<td><button type="button" name="" id="" v-on:click="del(i)" class="btn btn-primary">删除</button></td>
</tr>
<!-- <tr>
</td>
<td><button type="button" name="" id="" class="btn btn-primary" btn-lg btn-block">删除</button></td>
</tr> -->
</tbody>
</table>
<form action="">
<label>添加书籍</label>
<div class="form-group col-md-3">
<label for="">书名：</label>
<input type="text" v-model="newBook.name" class="form-control" name="" id=""
placeholder="">
<small id="helpId" v-bind:style="mystyle" class="">{{error1}}</small>
</div>
<div class="form-group col-md-3">
<label for="">作者：</label>
<input type="text" v-model="newBook.author" class="form-control" name="" id=""
placeholder="">
<small id="helpId2" v-bind:style="mystyle" class="">{{error2}}</small>
</div>
<div class="form-group col-md-3">
<label for="">价格：</label>
<input type="text" v-model="newBook.price" class="form-control" name="" id=""
placeholder="">
<small id="helpId3" v-bind:style="mystyle" class="">{{error3}}</small>
</div>
<button type="button" v-on:click="addBook" name="" id="" class="btn btn-primary ">添加</button>
</div>
</form>
</body>
<script src="vue.min.js"></script>
</html>
js
let vm = new Vue({
el: '#model',
data: {
error1:'',
error2: '',
error3: '',
mystyle:{
color: 'red',
},
id: 3,
newBook: {
id:'',
name: '',
author: '',
price: '',
},
book: [
{
id: "1",
name: "红楼梦",
author: "曹雪芹",
price: "32"
},
{
id: "2",
name: "水浒传",
author: "施耐庵",
price: "30"
},
{
id: "3",
name: "三国演义",
author: "罗贯中",
price: "24"
},
]
},
methods: {
//添加一行
addBook: function () {
if(this.newBook.name==""){
this.error1="书名不能为空!"
return;
}else{
this.error1 = ""
}
if(this.newBook.author == ""){
this.error2 = "作者不能为空！"
return;
}else{
this.error2 = ""
}
if (this.newBook.price == "") {
this.error3 = "价格不能为空！"
return;
}else{
this.error3 = ""
}
// this.id += 1;
// this.newBook.id= this.id;
this.book.push(this.newBook);
this.newBook = {
id: '',
name: '',
author: '',
price: '',
};
this.error1='';
this.error2 = '';
this.error3 = '';
},
//删除
del:function(i){
this.book.splice(i,1);
}
},
})
注意删除一行后序号也会发生改变