vue实现ToDoList简单实例
一、需求与准备
1、准备
使用bootstrap实现页面的基础样式（依赖jquery），使用vue实现功能需要
2、功能需求
1）、表单实现输入任务清单后加入到展示项中
2）、点击删除按钮弹出警告框询问是否删除（bootstarp模态框插件）
3)、确定删除时，删除对应项（单项删除，全部删除）
4）、任务列表为空时，显示“数据为空” v-show
二、实例
1、静态页面
demo使用bootstrap来快速搭建页面
1）、表单组件：
.form, form-group, form-control
2)、模态框：
样式类：.modal,modal-content,modal-header,modal-body,modal-footer
触发模态框：data-toggle=”modal”,data-target=”模态框ID”
取消模态框：data-dismiss=”true”
2、功能实现
1）、表单数据：
v-model（数据绑定）,v-on:click=”fun()”（绑定事件）,v-for=”value in dataArr”(遍历),
2）、添加任务
思路：通过v-model绑定数据到vue实例中（timeStamp,taskItem用于暂存数据），点击提交时，在事件响应函数内向任务列表数组内添加提交的数据后，再清空用于存放数据的timeStamp,taskItem。
3）、删除任务
在vue实例中的methods属性上添加事件响应函数，在data中定义targetIndex以存放点击的按钮索引，遍历时，绑定点击事件v-on:click=”targetIndex=$index”,点击时根据targetIndex的值，删除对应索引的数据。
4）、删除全部
绑定删除全部按钮事件，targetIndex=-2，在删除响应除数内通过判断确定是部分删除还是全部删除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<script src="../vendor/jquery-1.7.2.js"></script>
<script src="../vendor/bootstrap.js"></script>
<link href="../vendor/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<script src="../vendor/vue/dist/vue.js"></script>
</head>
<body>
<div class="container" id="box">
<form >
<div class="form-group">
<label for="timeStamp">时间</label>
<input type="datetime" id="timeStamp" v-model="timeR" name="timeStamp" class="form-control">
</div>
<div class="form-group">
<label for="todoItem" class="">任务</label>
<input type="text" id="todoItem" name="todoItem" v-model="taskItem" class="form-control">
</div>
<div class="form-group">
<button class="btn btn-success" v-on:click="add()" type="button">添加</button>
<button class="btn btn-danger" type="submit">重置</button>
</div>
</form>
<table class="table table-bordered text-center">
<caption><h3>任务清单</h3></caption>
<tr >
<th class="text-center">序号</th>
<th class="text-center">时间</th>
<th class="text-center">任务</th>
<th class="text-center">操作</th>
</tr>
<tr v-for="value in taskList">
<td>{{$index+1}}</td>
<td>{{value.timeStamp}}</td>
<td>{{value.task}}</td>
<td><button class="btn btn-danger" data-toggle="modal" data-target="#alertBox" v-on:click="targetIndex=$index">删除</button></td>
</tr>
<tr v-show="taskList.length!=0">
<td colspan="4" class="text-right"><button class="btn btn-danger" data-toggle="modal" data-target="#alertBox" v-on:click="targetIndex=-2">删除全部</button></td>
</tr>
<tr v-show="taskList.length==0">
<td colspan="4" class="text-muted" >暂无数据......</td>
</tr>
</table>
<div role="dialog" class="modal" id="alertBox">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">提醒：</div>
<div class="modal-body text-center" v-show="targetIndex>0">
确定要删除么？？？
</div>
<div class="modal-body text-center" v-show="targetIndex==-2">
确定要全部删除么？？
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal" v-on:click="deleteFn(targetIndex)">确认</button>
<button class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
<script>
var vm=new Vue({
el:"#box",
data:{
timeR:'',
taskItem:'',
targetIndex:-1,
taskList:[
{
timeStamp:'2016-12-03',
task:'学习学习'
},
{
timeStamp:'2016-12-03',
task:'代码代码代码'
}
]
},
methods:{
add:function(){
console.log(this.timeR)
this.taskList.push({
timeStamp:this.timeR,
task:this.taskItem
});
this.timeR="";
this.taskItem="";
},
deleteFn:function(index){
if(index>0){
this.taskList.splice(index,1)
}else{
this.taskList=[]
}
}
}
})
</script>
</body>
</html>
补充：
1）、v-on:click的简写形式：@click
2)、在vue中传入事件对象时：$event
3)、事件冒泡（原生：ev.cancelBubble=true,vue中@click.stop=”函数”）
4)、阻止浏览器默认行为：（原生：ev.preventDefault(),vue中@click.prevent=”函数”）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue中动态出来返回的时间秒数(在多少秒显示分、小时等等)的相关资料,文中通过代码示例介绍的非常详细,对大家学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
在现代的前端开发中,用户体验的重要性不言而喻,为了让应用程序更加生动和引人注目,动画和过渡效果是必不可少的元素,本文将以 Vue3 为基础,深入探讨如何在应用程序中实现动画过渡,以及一些技巧和最佳实践,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了Vue的编码技巧与规范使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了vue中自定义右键菜单插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue使用$http服务端收不到参数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
文章介绍了Vue中的v-model实现原理,包括数据监听和UI通知,通过绑定props.modelValue和使用update:modelValue,子组件可以实现数据变更通知父组件,Vue3提供了defineModel来简化v-model的定义,并支持自定义v-model变量名,感兴趣的朋友一起看看吧2025-01-01
原生JS实现Vue transition fade过渡动画效果示例
这篇文章主要为大家介绍了原生JS实现Vue transition fade过渡动画效果示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
Vue和React之间如何选择，这篇文章主要为大家详细介绍了Vue和React两者之间的相同之处，教大家该如何进行选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
在本篇文章里小编给大家分享的是一篇关于Vue—v-bind动态绑定class的知识点内容，有需要的朋友们可以参考下。2020-01-01
这篇文章主要介绍了Vue中结合clipboard实现复制功能 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
最新评论