Vue实现todolist删除功能
代码如下所示:
<div id="app"> <input v-model="inputValue"> <button @click="handleSumbit">提交</button> <todo-item v-for="(item,index) of list":key="index":content="item":index="index" @delete="handleDelete"></todo-item> </div>
子组件向父组件传递数据使用 this.$emit('delete',this.index)
该方法
<script > Vue.component('todo-item',{ props:["content",'index'], template:"<li @click='handleSubmit'>{{content}}{{index}}</li>", methods:{ handleSubmit:function () { this.$emit('delete',this.index) } } }) new Vue({ el:'#app', data:{ inputValue:'', list:[] }, methods:{ handleSumbit:function () { this.list.push(this.inputValue); this.inputValue=""; }, handleDelete:function (index) { this.list.splice(index,1) } } }) </script>
总结
以上所述是小编给大家介绍的Vue实现todolist删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
详解Vue的computed(计算属性)使用实例之TodoList
最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件. 给个例子 /*html*/ <input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/ var ap
-
vue2的todolist入门小项目的详细解析
看完vue2的官方文档后,找个入门项目巩固下知识点,简单的todolsit是个不错的选择. 项目用到了vue.js vue.cli webpack ES6 node环境,完成项目后会对这些技术栈有了些了解. 准备开发环境 $ npm install -g vue-cli $ vue init ,比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev 安装谷歌插件vue.js devtools 下载vue.js的
-
vue实现留言板todolist功能
通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&quo
-
vue实现todolist单页面应用
刚学习vue的小伙伴不知道从哪入手,很多网上的教程一来就搭建脚手架环境,可以新手更本看不懂,建议还是用引入script的方式引入vue.js,然后看官网的教程,再拿那这个demo练练手,也可以看看官网的demo,然后再去熟悉安装,搭建单页面应用. 效果: 功能: 在input输入文字点击按钮或者enter,下面会添加一个带复选框和文字还有删除按钮的li 用到的vue函数: data,methods,watch,还有localstorage 页面非常简单: 先写外面的盒子,这里用到v-model双
-
Vue.js实现简单ToDoList 前期准备(一)
一.前言 最近开始学习轻量级的mvvm框架Vue.js.就中文文档来说,算是很齐全了.之前本来在学习1.0版本,某日突然打开官网发现已更新为2.0.便把之后的都改为了2.0的语法.ps:如果恰好你是Vue的初学者的话,慕课网上有一个视频倒是可以去学习参考(我就是参考那个写了个ToDoList的小玩具,在这记录一下学习过程). 二.开篇 mvvm框架是前端现在比较热门的话题,去拉勾网上转一圈,基本70%都有要求.所以不说虚的,只是为了多挣点钱,咱们也该跟上时代的步伐不是.推荐一篇博文'http:/
-
利用vue写todolist单页应用
网上有很多关于vue的todolist小程序.大多是利用vue-cli脚手架工具开发的,这个官网的文档也不支持新手从单文件开始学习.所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习. 1.vue是啥? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.简单说是一个模板引擎,做过后端的应该很清楚,以前靠服务器端渲染的dom,放在浏览器端端渲染,vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的,数据驱动,数据双向绑定,赋予了用户很
-
基于vuejs实现一个todolist项目
用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <template> <div id="app"> <h1 v-html = "title"></h1> <input v-model="newItem" v-on:keyup.enter="add
-
vue实现ToDoList简单实例
一.需求与准备 1.准备 使用bootstrap实现页面的基础样式(依赖jquery),使用vue实现功能需要 2.功能需求 1).表单实现输入任务清单后加入到展示项中 2).点击删除按钮弹出警告框询问是否删除(bootstarp模态框插件) 3).确定删除时,删除对应项(单项删除,全部删除) 4).任务列表为空时,显示"数据为空" v-show 二.实例 1.静态页面 demo使用bootstrap来快速搭建页面 1).表单组件: .form, form-group, form-co
-
Vue实现todolist删除功能
代码如下所示: <div id="app"> <input v-model="inputValue"> <button @click="handleSumbit">提交</button> <todo-item v-for="(item,index) of list":key="index":content="item":index=&
-
vue实现todolist基本功能以及数据存储功能实例详解
实现todolist功能,具体实现如下: 可以实现对list添加.移除以及状态转变,其中添加功能既可以通过鼠标点击按钮实现,也可以通过回车键按下实现,通过使用v-model对checked的值进行双向绑定来完成状态的改变.在本次实际操作中仍存在一个小问题就是methods中函数调用,在完成数据存储前可以通过this.$options.methods.addFun();进行调用. <div id="app"> <input type="text" v
-
vue 左滑删除功能的示例代码
最近有个需求是要添加一个左滑删除的功能.参考了一下别的老哥的代码,做了一点点改进.记录一下.以备不时之需,话不多说 ,上代码 <template> <div class="slider-item"> <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="deleteSlider"
-
Vue.js实现一个todo-list的上移下移删除功能
如图,A simple todo-list长这样 这是一个基于vue.js的一个简单的todo-list小demo.首先要实现添加非空list,点击list切换finished状态这样的一个效果,推荐学习地址---->点击打开链接 接下来是实现的一个上移,下移,删除的效果图: 删除效果: 讲一下思路: 上移-----首先将鼠标所指list的内容插入到上一条上面,然后删除鼠标所指的list(也就是this.items[index]),运行代码便可实现上移的效果,或者将上下两条list的内容进行调换
-
vue实现todolist功能、todolist组件拆分及todolist的删除功能
•简单todolist功能的实现 用户点击提交按钮时,将input框的内容显示在下方的list中,同时清空list中内容. <body> <div id="root"> <div> <input v-model="inputValue"/> <button @click="submit">submit</button> </div> <ul> <
-
Vue中父子组件通讯之todolist组件功能开发
一.todolist功能开发 <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <li v-for="(item, index ) of list
-
使用Bootstrap和Vue实现用户信息的编辑删除功能
使用Bootstrap实现简单的布局,并结合Vue进行用户信息的编辑删除等功能,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户信息编辑</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.cs
-
使用vue.js实现checkbox的全选和多个的删除功能
template代码: <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr">
-
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
一.写在前面 1. Bootstrap是一个由 Twitter 开发和维护的前端框架,目前很受欢迎,Bootstrap中文网点击这里. 2. Vue.js 是一套构建用户界面的渐进式框架,点这里访问官网. 二.实现效果: 三.页面引入bootstrap.vue资源 <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="e
-
vue实现学生录入系统之添加删除功能
一.案例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue指令综合案例</title> <style> #app{ margin: 50px auto; width: 620px; } fieldset{ border: 2px solid plum; margin-bottom: 20px; } fieldset inp
随机推荐
- Python闭包实现计数器的方法
- Shell脚本中执行sql语句操作mysql的5种方法
- ACCESS的参数化查询,附VBSCRIPT(ASP)和C#(ASP.NET)函数第1/2页
- DB2 日期和时间的函数应用说明
- redis常用命令小结
- jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
- Java基于Runtime调用外部程序出现阻塞的解决方法
- Android上使用ZXing识别条形码与二维码的方法
- 在Python中操作列表之List.append()方法的使用
- javascript 局部页面打印实现代码
- JS实现一个列表中包含上移下移删除等功能
- php实现删除空目录的方法
- 自动跳转中英文页面
- PHP4 与 MySQL 数据库操作函数详解
- php从数组中随机选择若干不重复元素的方法
- 关于file_get_contents返回为空或函数不可用的解决方案
- JS轮播图中缓动函数的封装
- JSP 相关对象的使用介绍
- 深入解析Java中volatile关键字的作用
- 使用Limit参数优化MySQL查询的方法