vue模拟实现增删改查

代码复制黏贴可执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TodoList</title>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <input type="text"  placeholder="添加一个任务" v-model="inputValue">
        <button @click="add">添加</button>&nbsp;
        <button @click="cha">查找</button>
        <br/>
        <h4>未完成</h4>
        <ul>
        <todo-item v-for="(item,index) in list" :item="item" :index="index" :key="index" @del-son="dels" :f="f" @cor-son="cors" />
        </ul>
        
    </div>
    <script>
        var TodoItem={
            props:['item','index','f'],
            template:"<li><span v-if='f'>{{item}}</span><input type='text' v-else='!f' v-model='item'/></button></button>&nbsp;<button @click='del'>删除</button>&nbsp;<button @click='cor'>修改</button></li>",
    
            methods:{
                del:function(){
                 this.$emit("del-son",this.index);
                },
                cor:function(){
                 console.log(this.item)
                    this.$emit("cor-son",this.index,this.item,this.f)
                 
                }
            }
        }
    var app=new Vue({
          el:'#app',
          components:{
              TodoItem:TodoItem,
          },
          data:{
              list:[],
              inputValue:"",
            f:true,  
          },
         
          methods:{
              add:function(){
                  this.list.push(this.inputValue);
                  this.inputValue="";
              },
              dels:function(index){
                  this.list.splice(index,1);
              },
              cors:function(index,value,e){
                 this.list.splice(index,1,value);
                 this.f=!e;
              },
              cha:function(){
                  value=this.inputValue;
                  console.log("你好",value)
                    var lists=[];
                 this.list.forEach((ele,index)=> {
                     if(ele==value){
                         lists.push(ele)
                         console.log("王城",lists)
                     }
                 })
                 this.list=lists;
                 
                 ;
              }
https://images.cnblogs.com/cnblogs_com/hff-syt/1572196/t_191231023420文件.PNG?a=1577759713751