下面将介绍两种方式实现动态添加和删除列表
创新互联公司是少有的成都网站建设、网站设计、营销型企业网站、微信小程序定制开发、手机APP,开发、制作、设计、外链、推广优化一站式服务网络公司,自2013年起,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评1.不使用组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - vue实现列表增加和删除</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <input v-model="newAddText" placeholder="请输入要添加的内容" /> <button @click='addNewList'>添加</button> <ul> <li v-for='(list,index) in lists' v-bind:key='list.id'> {{list.title}} <button v-on:click='lists.splice(index, 1)'>删除</button> </li> </ul> </div> <script> var vm = new Vue({ el: '#app', data: { newAddText:'', lists:[ {id:1,title:'手机号码'}, {id:2,title:'qq号'}, {id:3,title:'姓名'}, ], nextTodoId: 4 }, methods:{ addNewList:function(){ this.lists.push({ id:this.nextTodoId++, title:this.newAddText }) this.newAddText='' } } }) </script> </body> </html>
分享标题:Vue实现列表动态添加和删除的两种方法小结-创新互联
链接地址:https://www.cdcxhl.com/article22/idjjc.html
成都网站建设公司_创新互联,为您提供App开发、服务器托管、用户体验、商城网站、外贸网站建设、ChatGPT
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联