金山老师的笔记7.综合案例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="./js/vue.js"></script>
<style>
#app{
width: 500px;
}
table{
width: 100%;
border-collapse: collapse;
}
table tr th,table tr td{
height: 35px;
border-bottom: solid 1px #999;
text-align: center;
}
.clear-btn{
text-align: right;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="(obj,index) in arr">
<td>{{obj.userId}}</td>
<td>{{obj.userName}}</td>
<td>{{obj.userAge}}</td>
<td><button @click="del(index)" >删除</button></td>
</tr>
<tr >
<td><button @click="clear()" >清空</button></td>
</tr>
</table>
<h3>添加</h3>
姓名：<input type="text" v-model="userName"><br>
年龄：<input type="text" v-model="userAge"><br>
<button @click="add">添加</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
arr: [{
userId: 1,
userName: '张三',
userAge: 20
}, {
userId: 2,
userName: '李四',
userAge: 21
}, {
userId: 3,
userName: '王五',
userAge: 22
}],
userName:'',
userAge:null,
},
methods:{
del(index){
//this Vue实例
this.arr.splice(index,1);
},
clear(){
this.arr = [];
},
add(){
//获取控件
let userName = this.userName;
let userAge = this.userAge;
let userId = (this.arr.length +1);
this.arr.push({
userId,
userName,
userAge
})
}
}
});
</script>
</body>
</html>