效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todolist加购物车</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<div class="container">
<table class="table table-bordered table-hover text-center">
<tr>
<td colspan="6">
<button class="btn btn-success btn-sm" @click="showaddinfo">添加</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
编号
</td>
<td>
姓名
</td>
<td>
性别
</td>
<td>
成绩
</td>
<td>
操作
</td>
</tr>
<tr v-for="(item,index) in list">
<td>
<input type="checkbox" @change="ischeck(index)" />
</td>
<td>
{{item.id}}
</td>
<td>
{{item.Name}}
</td>
<td>
{{item.sex}}
</td>
<td>
{{item.grade}}
</td>
<td>
<button class="btn btn-danger" @click="reduce(index)" :disabled="item.ischeck">删除</button>
</td>
</tr>
</table>
<p class="text-right">
成绩最高的是:{{allMoney}}
</p>
<p class="text-right">
平均分:{{allNum}}
</p>
<p class="text-right">
最高分的同学是:{{address}}
</p>
<hr />
<form v-if="isShow">
<div class="form-group">
<input class="form-control" placeholder="编号" v-model="newid" />
</div>
<div class="form-group">
<input class="form-control" placeholder="姓名" v-model = "newname"/>
</div>
<div class="form-group">
<input class="form-control" placeholder="性别" v-model = "newsex"/>
</div>
<div class="form-group">
<input class="form-control" placeholder="成绩" v-model = "newgrade"/>
</div>
<div class="form-group">
<button class="btn btn-info" type="button" @click="addInfo">确定</button>
</div>
</form>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
list:[
{id:1,Name:"张三",sex:'男',grade:60,ischeck:true},
{id:2,Name:"李四",sex:'男',grade:70,ischeck:true},
{id:3,Name:"王五",sex:'男',grade:80,ischeck:true},
{id:4,Name:"钱六",sex:'男',grade:90,ischeck:true}
],
isShow:false,
address:"",
newid:0,
newname:'',
newsex:'',
newgrade:0
},
methods:{
ischeck(index){
this.list[index].ischeck = !this.list[index].ischeck
},
reduce(index){
this.list.splice(index,1)
// console.log(this.list)
},
showaddinfo(){
this.isShow = !this.isShow
},
addInfo(){
var have = false
for (var i = 0;i<this.list.length;i++) {
console.log(this.newid+"and"+this.list[i].id)
if (this.newid == this.list[i].id) {
have = true
}
// console.log(have)
}
if (have) {
alert('不能重复添加')
}else{
this.list.push({id:this.newid,Name:this.newname,sex:this.newsex,grade:this.newgrade,ischeck:true})
this.newid=""
this.newname=""
this.newsex=""
this.newgrade=""
}
}
},
computed:{
allMoney(){
var sum = this.list[0].grade
for (var i=0;i<this.list.length;i++) {
if(this.list[i].grade>sum)
sum = this.list[i].grade
this.address = this.list[i].Name
}
return sum
},
allNum(){
var sum = 0
for (var i=0;i<this.list.length;i++) {
sum += this.list[i].grade
}
return sum/this.list.length
}
}
})
</script>
</body>
</html>