Vue实现简易todolist
通过单击添加按钮，将输入框中的值添加到下面，可删除，也可重新编辑。具体效果如图：
具体代码如下：
<!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">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
input{
background-color: gainsboro;
border: none;
height:40px;
width:200px;
border-radius: 20px;
padding:0 10px;
}
#app{
margin-left: 100px;
margin-top: 100px;
}
button{
background-color: gainsboro;
border: none;
height:30px;
width:60px;
border-radius: 5px;
}
li{
margin-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="ipt" id="ipt">
<button @click="addBtn">添加</button>
<ul>
<li v-for="(item, index) in arr" :key="index">
{{index}}.{{item}}
<button @click="delBtn(index)">删除</button>
<button @click="updBtn(index)">编辑</button>
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
ipt:"",
arr:[],
isup:false,//点击编辑时的状态,一开始是添加状态，
num:0
},
methods: {
addBtn(){
if(this.ipt!=""){
if(this.isup==false){//添加状态
this.arr.push(this.ipt);//将ipt的值push到数组中
this.ipt=""//将ipt 设为空
}else{//编辑状态
this.arr[this.num]=this.ipt;//数组的第num 位, 也就是Index位,将ipt的值给它
this.isup=false;
this.ipt=""
}
}
},
delBtn(index){
this.arr.splice(index,1)
},
updBtn(index){
this.ipt=this.arr[index];//点击添加按钮时，将该行的值 赋给ipt
this.num=index;//将该行的index传给num
this.isup=true;//
}
},
})
</script>
</body>
</html>
