实现表格的动态添加删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
create new person
<p>Name:<input type="text" v-model="newPerson.name"></input></p>
<p>Age:<input type="text" v-model="newPerson.age"></input></p>
<p>Sex:<select v-model="newPerson.sex">
<option value="Male">Male</option>
<option value="FeMale">FeMale</option>
</select></p>
<p><button @click="createPerson">create</button>
</div>
<table>
<thead>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Delete</th>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
<td><button @click="deletePerson($index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
<script src="../js/vue.js"></script>
<script src="../mainJS/demo.js"></script>
</body>
</html>
js
var app = new Vue({
el: '#app',
data:{
newPerson: {
name: '',
age: 0,
sex: 'Male'
},
people:[
{
name:'葱',
age:20,
sex:'女',
},
{
name:'姜',
age:10,
sex:'男',
},
{
name:'蒜',
age:22,
sex:'男',
},
]},
methods:{
createPerson: function(){
this.people.push(this.newPerson);
// 添加完newPerson对象后，重置newPerson对象
this.newPerson = {name: '', age: 0, sex: 'Male'}
},
deletePerson: function(index){
// 删一个数组元素
this.people.splice(index,1);
}
}
})
参考的是 https://www.cnblogs.com/rik28/p/6024425.html
若干天后学习了一个新的小demo做起来其实和这个表格管理挺类似的，那么就放到一起吧。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.js"></script>
<style type="text/css">
.chose{
display: block;
width: 15px;
height: 15px;
background-color: gray;
}
.chosed{
background-color: black;
}
span{
display: block;
float: left;
margin: 10px;
}
ul li{
width: 100%;
list-style: none;
float: left;
}
.close{
margin-right: 400px;
}
</style>
</head>
<body class="container">
<div id="app">
<p><h3>小目标</h3></p>
<input type="text" placeholder="输入目标后按回车键确认" v-model="addText" @keyup.13='addList'></input>
<p>共有{{doList.length}}个小目标，已完成{{doList.length-noend}}个，还剩{{noend}}个</p>
<input type="radio" name="type" checked="true" @click="choseType(1)" /><label>所有目标</label>
<input type="radio" name="type" @click="choseType(2)"/><label>已完成目标</label>
<input type="radio" name="type" @click="choseType(3)"/><label>未完成目标</label>
<ul>
<li v-for="list in newList">
<span class="chose" @click="list.status=!list.status" :class="{'chosed':list.status}"></span>
<span>{{list.name}}</span>
<span class="close" @click="delet(list)">X</span>
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script src="../mainJS/todoList.js"></script>
</body>
</html>
js
new Vue({
el: "#app",
data: {
addText:'',
newList:[],
curType:0,
doList:[
{
name:'html',
status:true,
},
{
name:'css',
status:false,
},
{
name:'js',
status:false,
}
]
},
computed:{
noend:function(){
return this.doList.filter(function(item){
return !item.status
}).length;
}
},
methods:{
addList:function(){
this.doList.push(
{
name:this.addText,
status:false,
}
);
// 添加完新对象后，重置addText对象
this.addText='';
},
choseType:function(type){
this.curType=type;
switch(type){
case 1:
this.newList=this.doList;break;
case 2:
this.newList=this.doList.filter(function(item){return item.status});break;
case 3:
this.newList=this.doList.filter(function(item){return !item.status});break;
}
},
delet:function(list){
var index=this.doList.indexOf(list);
//根据索引，删除数组某一项
this.doList.splice(index,1);
//更新newList newList可能经过this.doList.filter()赋值，这样的话，删除了doList不会影响到newList 那么就要手动更新newList
//this.newList=this.doList;
this.choseType(this.curType);
},
},
mounted(){
this.newList=this.doList;
}
});
实例有点略丑，没有去认真做好美化= =
