<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 主表单(输入信息)的样式 */
.remove{
text-decoration: line-through;
color: #666;
background-color: white;
}
.noBorder{
border: none;
}
</style>
</head>
<body>
<div class="app1">
<h3>
任务总数:{{todoList.length}},
未完成:{{todoList.filter(item=>!item.isFinished).length}}
<!-- 选中为已经完成,未选中为未完成,过滤函数,item为第一个参数,未完成为未选中.length为未完成的个数 -->
<input type="button" name="" id="" value="删除已经完成项目" @click="deleteTodo"/>
</h3>
<ul>
<li v-for="todo in todoList" :key="todo.id">
<input type="checkbox" name="" id="" value="" v-model="todo.isFinished"/>
<!-- 复选框选中状态 isFinished -->
<input
type="text"
v-model="todo.text"
class="noBorder"
:class="{remove:todo.isFinished}"
:disabled="todo.isFinished"
/>
<!-- 输入表单内容与添加按钮的表单双向绑定,根据vue的属性样式改输入框的样式,绑定属性(disable)为禁止,选中状态为禁止 -->
</li>
</ul>
<input type="text" name="" id="" value="" v-model="todotext"/>
<!-- 输入添加信息的输入框 -->
<input type="button" name="" id="" value="添加" @click="add"/>
<!-- 添加信息的按钮 -->
</div>
</body>
</html>
<script type="text/javascript">
// 功能分析
// 1、显示
// 2、添加
// 3、删除
// 4、选中
// 5、修改
</script>
<script src="../../day2/02code/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:".app1",
data:{
todotext:"",
// 输入框绑定的内容
todoList:[
{
id:"1",
text:"写HTML",
isFinished:false
},
{
id:"2",
text:"写CSS",
isFinished:false
},
{
id:"3",
text:"写JS",
isFinished:false
},
]
},
// 对象渲染到页面
methods:{
add(){
let newId = parseInt(this.todoList[this.todoList.length - 1].id) + 1;
// 去ID并自增
this.todoList.push({
id:newId,
text:this.todotext,
isFinished:false
});
// 将输入框中的信息尾插到主表中
this.todotext="";
},
deleteTodo(){
if(confirm("确认删除?")){
this.todoList=this.todoList.filter(todo=>!todo.isFinished);
}
}
// 删除已完成列表,v-if和v-show控制结点的显示和隐藏,
}
});
</script>
ToDoList
最新推荐文章于 2024-04-04 09:49:03 发布