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>
<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> <button @click='del'>删除</button> <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