一、代码
<!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>
<style>
table{
margin:20px auto;
border-collapse: collapse;
}
td,th{
width: 100px;
height: 40px;
border-bottom:1px solid #999;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr>
<th><button @click="quanxuan">全选</button></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th><button>删除</button></th>
</tr>
<tbody v-bind:class="{solids:items.stat}" v-for="(items,key) in arr">
<tr >
<td><input type="checkbox" v-model="items.stat"></td>
<td>{{key+1}}</td>
<td>{{items.name}}</td>
<td>{{items.age}}</td>
<td><button v-on:click="del(key)">删除</button></td>
</tr>
</tbody>
<tr><td colspan="5"><button v-on:click="qk">清空</button></td></tr>
</table>
<div id="add">
<h3>添加</h3>
<form action="">
<label for="">姓名</label>
<!-- 绑定输入的值 -->
<input type="text" v-model="val" value=""><br>
<label for="">年龄</label>
<!-- 绑定输入的值 -->
<input type="text" v-model="val2" value="">
</form><br>
<button @click="Add">添加</button>
</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
// 初始化
val:"",
val2:"",
Age:"",
arr:[
{
age:"22",
name:"张三"
},{
age:"11",
name:"李四"
}
],
},
methods:{
Add:function(){
// 输入框的输入数据非空时
if(!(this.val=="")){
//拿到数据,创建对象,将数据融合到数组items中
var newarr ={}
newarr.name=this.val;
newarr.age=this.val2;
newarr.stat=false
this.arr.push(newarr) //将整合好的数据对象放到数组中去
this.val="" //清空文本框
this.val2=""
console.log(this.val2)
}else{
alert("请输入数据,输入不能为空!");
}
},
del:function(key){
this.arr.splice(key,1);
},
// 清空功能
qk:function(){
var gaga = this.arr
// 设置一个容器用来装没有被选中的数组
var rongarr = []
for(var i=0;i<gaga.length;i++){
if(gaga[i].stat==!true){
// gaga.splice(i,1)
// 将没有选中的放到一个数组rongarr中
rongarr.push(gaga[i])
};
};
// 给arr重新赋值为rongarr
this.arr = rongarr
},
quanxuan:function(){
var checkBox = this.arr
for(var i=0;i<checkBox.length;i++){
checkBox[i].stat=true;
}
},
}
})
</script>
</body>
</html>