这是一个使用Vue.js框架编写的TodoList应用程序，包含HTML结构、CSS样式和JavaScript逻辑。用户可以查看任务列表，标记任务为已完成，添加新任务，以及编辑现有任务。应用实时更新任务状态，并显示未完成任务的数量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<title>TodoList</title>
<style>
.container{
width: 500px;
margin: 0 auto;
}
.a{
color: aqua;
text-decoration: none;
}
li{
list-style-type: none;
font-size: 20px;
margin-top: 10px;
}
.sp{
color: #ccc;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="app" class="container">
<h1>任务列表</h1>
<h3>任务总数还有{{list.length}};还有:{{ excess() }} 未完成; [<span class="a" @click="success()">完成</span>]
<ul style="margin-top: 30px;">
<li v-for="(item,index) in list">
<input type="checkbox" v-model="item.bol">
<span v-show="!item.edit" @click="input(index)" v-bind:class="{'sp' : item.bol}" @click>{{item.des}}</span>
<input type="text" v-model="item.des" v-show="item.edit" value="item.des" @blur="bluei(index)">
</li>
</ul>
<input type="text" name="" v-model="msg" id="">
<button @click="add()">添加</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
let app={
data(){
return{
msg:"",
list :[
{
des: "编写java代码",
bol: false,
edit: false
},
{
des: "UI设计",
bol: false,
edit: false
},
{
des: "编写页面代码",
bol: false,
edit: false
},
{
des: "编写js代码",
bol: false,
edit: false
}
]
}
},
methods:{
excess(){
let num=0;
for (let index = 0; index < this.list.length; index++) {
if(!(this.list[index].bol)){
num++;
}
}
return num;
},
input(index){
this.list[index].edit=true;
},
success(){
let arr=[];
for(let i=0;i<this.list.length;i++){
if(!this.list[i].bol){
arr.push(this.list[i])
}
}
this.list=arr;
},
bluei(index){
this.list[index].edit=false;
},
add(){
let item={
des: this.msg,
bol: false,
edit: false
}
this.list.push(item);
}
}
}
Vue.createApp(app).mount("#app");
</script>
</html>
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
