todolist 删除功能

最新推荐文章于 2023-04-25 01:00:00 发布
最新推荐文章于 2023-04-25 01:00:00 发布
阅读量813 收藏 2
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/purple_lumpy/article/details/81159793
版权

思路： 在子组件的click 事件中，删除父组件中的list项中的某一数值。

即子组件与父组件通信。此时，需要“发布订阅模式”来做这件事情。

<!DOCTYPE html>
<html>
<head>
	<title>todolist</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div>
			<input v-model="inputValue" />
			<button @click="handleclick">提交</button>
		</div>
		<ul>
			<!-- 使用全局组件 -->
			<!-- 这是父组件！！！ -->
			<todo-list 
				v-for="(item,index) of list" 
				:key="index"
				:content="item"
				:index="index"
				@delete="handleDelete">
				<!-- 监听子组件的delete事件 -->
			</todo-list>
		</ul>
	</div>

	<script >
		// 全局组件
		// 这是子组件！！！
		Vue.component('todo-list',{
			props: ['content','index'],
			template: '<li @click="handleclick">{{content}}</li>',
			methods: {
				handleclick: function(){
					// 子发布一个delete事件，传递一个参数
					this.$emit('delete',this.index);
				}
			}
		})


		new Vue({
			el: "#root",
			data: {
				inputValue: "",
				list: []
			},
			methods: {
				handleclick: function(){
					this.list.push(this.inputValue);
					this.inputValue = '';
				},
				handleDelete:function(index){
					this.list.splice(index,1)
				}
			}
		})
	</script>
</body>
</html>

 

purple_lumpy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
组件与实例的关系
jianjian_5201314的博客
10-26 785
组件与实例的关系 Vue中的每一个组件，都是Vue的一个实例 任何一个Vue项目，都是由很多个实例组成的 组件里面也可以写methods,也可以写data,也可以写计算属性等 如果Vue的根实例，没有模板，它会去找挂载点，它会把挂载点标签下的模板内容当成实例的模板来使用。 每一个组件/实例统称为组件，因为组件就是Vue的一个实例，反回来每一个Vue实例就是一个组件。 代码如下 <!DOCTYPE html> <html lang="en"> <head&gt...
todolist组件（局部组件/全局组件/删除功能）
Akita·Wang's Semantic Segmentation
07-04 324
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;TodoList组件的删除功能.html&lt;/title&gt; &lt;script type="text/javascript" src="./vue.js&quot
Vue入门学习笔记：TodoList（十）：实现todolist的删除功能
...
04-14 1932
目录： Vue入门学习：TodoList（一）：HelloWorld Vue入门学习：TodoList（二）：挂载点、模板、实例 Vue入门学习：TodoList（三）：实例中的数据、事件和方法 Vue入门学习：TodoList（四）：属性绑定和双向数据绑定 Vue入门学习：TodoList（五）：计算属性和侦听器 Vue入门学习：TodoList（六）：v-if, v-show, v-for指令 Vue入门学习：TodoList（七）：todolist功能开发 Vue入门学习：TodoList（八）：t.
实现TodoList新增删除功能
qq_37761362的博客
04-16 400
import React, { Component,Fragment} from 'react'; import logo from './logo.svg'; import './App.css'; class TodoList extends Component { constructor(props){ super(props); this.st...
todolist刪除
hongxiao2016的博客
09-14 160
<!doctype html> <html> <head> <meta charset="utf-8"> <title>TodoList刪除</title> <script src="vue.js"></script> </head> <body> <div id="r...
Vue实现todolist删除功能
08-27
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个基本的待办事项列表（Todo List）应用，特别是关注删除功能的实现。Vue.js是一个轻量级的前端JavaScript框架，以其响应式数据绑定和组件化特性而受到广泛欢迎...
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
在这个教程中，我们将探讨如何使用Vue实现一个基本的待办事项（TodoList）功能，包括组件拆分和删除功能。 首先，让我们看一个简单的TodoList功能的实现。在HTML中，我们有一个`<input>`元素和一个提交按钮，它们...
原生JavaScript实现todolist功能
10-18
原生JavaScript实现待办事项列表（TodoList）功能是前端开发中的一个基础而重要的实践项目，它不仅帮助开发者练习JavaScript对DOM的操作，还能深入理解事件处理以及本地存储的使用方法。本知识点将详细讲解如何使用...
Vue学习之todolist删除功能
weixin_30780221的博客
01-06 192
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
Vue实现todolist的删除功能
ganlanA的博客
10-22 523
子组件通过发布订阅模式向父组件传递数据。父组件通过属性的形式向子组件传递参数。
todolist删除数据2-67
qq_41632427的博客
06-13 94
html
前端学习（1047）:todolist删除数据2
歌谣的博客
05-05 253
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>todoList待...
todoList案例（react版本）之删除todo
richest_qi的博客
05-09 382
文章目录App.js（App组件）List/index.jsx（List组件）Item/index.jsx（Item组件）相关链接 鼠标移入效果采用css实现。 删除todo，代码变更涉及的文件有： App.js，即App组件 List/index.jsx，即List组件 Item/index.jsx，即Item组件 App.js（App组件） import React, { Component } from 'react'; import Header from "./components/Head
第二十五章 案例TodoList 之删除数据
天界程序员的博客
04-25 872
利用props通信完成Todolist的删除操作
todolist实现删除的功能_使用vue实现删除并输入原因的功能
weixin_39634508的博客
11-25 142
使用vue实现删除并输入原因的功能加了一个删除按钮；哎，这个文件一千多行了还没到底可以看到vue就是可以让你瞎写胡乱写他也能给你一个美好的结果这就是vue厉害的vue经过我手工测试之后果然没毛病了一个复杂的功能在vue框架的使用下仅仅只需要几行小代码接口实现复杂的逻辑交互虽然这个文件写了一千多行删除功能完成了吗？没完成很多时候代码多了业务逻辑老板随时要改要加要改你总不能保证谁每天要加要改你都能一下...
react--todolist 实现删除和改变选中状态
逆风飞翔的代码狗
07-11 599
todolist–删除todo和改变todo的选中状态 拿到点击删除按钮的那一个todo的主键Id，通过api里面定义的删除请求： 这里有一个特别重要的点，就是怎么样去拿到id 在父组件传递给子组件的同时会把id也传递过去，那么我们只需要在子组件通过props接收就可以了，在父组件传递过去的时候需要将信息通过{…}展开 App.js import React, { Component } from 'react' import TodoHeader from './components/header/toh
React开发-实现TodoList新增删除功能
weixin_42206243的博客
06-26 588
1. React开发环境准备 安装nodejs和npm： 下载地址https://nodejs.org/en/download 安装成功后,查看版本shangyudianzideMacBook-Pro:~ shangyudianzi$ npm -v 6.9.0 shangyudianzideMacBook-Pro:~ shangyudianzi$ node -v v10.16.0 创建项...
vue组件： todolist功能开发，todolist组件拆分，todoLidt删除
willard_cui的博客
08-25 730
通过todolist案例学习vue中组件的概念和使用‘ 1、 todolist功能开发 使用v-model、v-on（@）、v-for指令实现todolist功能 实例： &lt;div id="root"&gt; &lt;input type="text" v-model:value="inputValue"&gt; &lt;button @click=...
Vue 12 todolist 删除已选中任务
qwer22215的博客
11-20 263
Vue 实现todolist的添加删除功能
最新发布
06-07
好的，下面是一个简单的 Vue 实现 todolist 的添加删除功能的代码示例： ```html <!DOCTYPE html> <html> <head> <title>Vue TodoList</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <h1>TodoList</h1> <input type="text" v-model="newTodo"> <button @click="addTodo">Add</button> <ul> <li v-for="(todo, index) in todos"> {{ todo }} <button @click="removeTodo(index)">Delete</button> </li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { newTodo: '', todos: [] }, methods: { addTodo: function() { if (this.newTodo != '') { this.todos.push(this.newTodo); this.newTodo = ''; } }, removeTodo: function(index) { this.todos.splice(index, 1); } } }) </script> </body> </html> ``` 在这个示例中，我们首先定义了一个包含两个属性的 Vue 实例，分别是 `newTodo` 和 `todos`。`newTodo` 表示用户输入的待办事项，`todos` 表示所有已添加的待办事项列表。 然后，我们定义了两个方法，`addTodo` 和 `removeTodo`，来实现添加和删除待办事项的功能。在 `addTodo` 方法中，我们首先判断用户输入的待办事项是否为空，如果不为空，则将其添加到 `todos` 列表中，并清空 `newTodo`。在 `removeTodo` 方法中，我们通过 `splice` 方法从 `todos` 列表中删除指定索引的待办事项。 最后，我们在页面中使用 `v-model` 指令绑定用户输入的待办事项到 `newTodo` 属性上，使用 `v-for` 指令循环渲染 `todos` 列表，并在每个待办事项后面添加一个删除按钮，通过 `@click` 绑定 `removeTodo` 方法来实现删除功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值