前端面试题 vue实现一个增，删，改，查的小demo

因为天冷 我总结完就要钻被窝了 现在手都冻得受不了了 

<div id="app">
            <input type="text" placeholder="请输入新添加成员的名字" v-model="userInput">
            <input type="submit" value="添加" @click="add">
            <input type="text" placeholder="请输入要搜索成员的名字" v-model="userInput1">
            <input type="submit" value="搜索" @click="search">
            <input type="text" placeholder="请输入要修改成员的编号" v-model="userInput2">
            <input type="text" placeholder="请输入要修改后的名字" v-model="userInput3">
            <input type="submit" value="修改" @click="edit">
            <ul v-if="searchList.length>0">
                <li v-for="(val,idx) in searchList" :key="idx">编号==>{{idx+1}}  {{val}}<===><button @click="del(idx)">删除</button></li>
            </ul>
            <ul v-else>
                <li v-for="(val,idx) in dataList" :key="idx">编号==>{{idx+1}} {{val}}<===><button @click="del(idx)">删除</button></li>
            </ul>
        </div>

界面是这样的效果有点丑 凑合着看吧   就是要实现一个 增 删  改 查的功能 

这个是data里面的假数据

data:{
                dataList:[
                    'xiaohong',
                    'xiaoming',
                    'xiaobai'
                ],
                searchList:[], //用来存储search的数据
                userInput:'',
                userInput1:'',
                userInput2:'',
                userInput3:'',
            },

增加的代码：

add:function(){
                    this.dataList.push(this.userInput);
                    this.userInput=''; //清空用户输入框
                },

删除的代码:

del:function(i){
                    this.dataList.splice(i,1)
                },

查找的代码：

查找这里有点复杂 我就讲解一下   在data里面 定义了一个展示数据和搜索后的数据 

搜索使用了 es6的 filter方法 不懂这个方法的 前面博客我有讲解的 其实这里也没必要考虑特殊情况 没有必要说明的话

search:function(){
                    var _self=this;
                    if(this.userInput1!=''){
                        this.searchList=this.dataList.filter(function(value){
                            return value.indexOf(_self.userInput1)>-1
                        })
                        console.log(_self.searchList);

                        if(this.searchList[0]==undefined){
                            alert('此成员不存在!');
                        }
                    }
                },

修改的代码:  修改的代码 使用的还是 splice 方法  这里可能有人忘记了 splice 的这种功能 可不仅仅是删除的功能 这里之所以减1 是我在写编号的时候 加上了 1

edit:function(){
                    this.dataList.splice(this.userInput2-1,1,this.userInput3);
                }