<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
tbody:empty:after {
content: '没有找到';
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="searchName">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in getStuListBySearch ">
<td>{{item.stuName}}</td>
<td>{{item.age}}</td>
<td><span @click="up(index)">修改</span> <span @click="del(index)">删除</span> </td>
</tr>
</tbody>
<tr>
<td><input type="text" v-model="username" /></td>
<td><input type="text" v-model="age" /></td>
<td><button type="button" v-on:click="save(index)">添加</button></td>
</tr>
</table>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
stuList:[
{stuName:'小牧',age:22},
{ stuName:'小hai',age:32},
{ stuName:'小米',age:12}
],searchName:'',
username:'',
age:'',
index:-1
},
methods:{
del(index) {
this.stuList.splice(index,1)
},
save: function (index) {
if(this.index==-1){
this.addStu()
} else{
this.username=this.stuList[index].stuName
this.age=this.stuList[index].age
}
},
addStu(){
if(this.username.length==0){
alert('请输入用户名');
return
}else if(this.age.length==0){
alert('请输入年龄');
return
}
var age =parseInt(this.age);
if(isNaN(age)){
alert('年龄请输入数字');
return
}
var obj = {stuName: this.username, age: this,age}
this.stuList.push(obj)
this.username=''
this.age=''
},
up(index){
this.index=index
this.username=this.stuList[index].stuName
this.age=this.stuList[index].age
},
edit: function (obj) {
this.rowtemplate = obj;
}
},computed:{
// getStuListBySearch(){
// var search =this.searchName;
// var arr =[];
// for(var i=0;i<this.stuList.length;i++){
// if(this.stuList[i].stuName.indexOf(search)>=0){
// arr.push(this.stuList[i])
// }
// }
// return arr
// },
getStuListBySearch(){
var search=this.searchName
return this.stuList.filter(function (item) {
return item.stuName.indexOf(search)>=0
})
}
}
})
</script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「人间正道是沧桑_jinwei」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/shibaweijin/article/details/107018967
