<!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('年齡請輸入數(shù)字');
? ? ? ? ? ? ? ? ? ? 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>
————————————————
版權(quán)聲明：本文為CSDN博主「人間正道是滄桑_jinwei」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/shibaweijin/article/details/107018967
