<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div class="list_con" id="app">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt" v-model="txtVal">
<input type="button" name="" value="增加" @click="add" id="btn1" class="inputbtn">
<ul id="list" class="list">
<li v-for="item,index in arr">
<span>{{ item }}</span>
<a href="javascript:;" class="del" @click="del(index)">删除</a>
</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
txtVal:"",
arr:["学习html","学习css","学习javascript"]
},
methods:{
del(i){
// 删除数组中的对应项
// this.arr.splice(要操作的索引,要删除的个数,要增加的元素)
this.arr.splice(i,1)
},
add(){
// 数据验证,验证不过关,就return
if(!this.txtVal.trim()){
alert("请输入数据")
return
}
// 是最终要执行的逻辑
// this.arr.unshift(用户输入的数据)
this.arr.unshift(this.txtVal);
this.txtVal = "";
}
}
})
</script>
</body>
</html>
添加删除列表
于 2024-06-12 16:09:58 首次发布