第二十三篇:自定义事件(比如删除)
2021/9/28 23:42:18
本文主要是介绍第二十三篇:自定义事件(比如删除),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
好家伙,贼绕,贼复杂
以下就是用自定义事件实现删除的功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view层,模板--> <div id="vue"> <todo> <todo-title slot="todo-title" :title="title_text"></todo-title> <!--<todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item"></todo-items>--> <!--如下为简写--> <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item_p="item" :index_p="index" v-on:remove="removeItems(index)" :key="index"></todo-items> </todo> </div> <!--1.导入Vue.js--> <script src="../js/vue.js"></script> <script type="text/javascript"> Vue.component('todo',{ template:'<div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' }); Vue.component('todo-title',{ props:['title'], template:'<div>{{title}}</div>' }); //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来! Vue.component("todo-items",{ props:["item_p","index_p"], //这里我绑定我自己的方法 template:"<li>{{index_p+1}},{{item_p}} <button @click='remove_methods'>删除</button></li>", methods:{ remove_methods:function (index) { //this.$emit 自定义事件分发, this.$emit('remove',index); //删除 } } }); var vm = new Vue({ el:"#vue", data:{ title_text:"秦老师系列课程", todoItems:['test1','test2','test3'] //普普通通的数据 }, methods:{ removeItems:function(index){ console.log("删除了"+this.todoItems[index]+"OK"); //控制台显示操作 this.todoItems.splice(index,1); } } }); </script> </body> </html>
这篇关于第二十三篇:自定义事件(比如删除)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)