Vue 动态添加删除input输入框

it2024-04-19  47

效果图:

 

参考博客:https://blog.csdn.net/m0_37479246/article/details/78865898

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <button @click='addNewList'>添加</button> <ul> <li v-for='(list,index) in lists' :key='list.id'> <input :value="list.id" /> <button @click='lists.splice(index, 1)'>删除</button> </li> </ul> </div> <script> var vm = new Vue({ el: '#app', data: { lists: [], nextTodoId: 0 }, methods: { addNewList: function() { this.lists.push({ id: this.nextTodoId++ }) } } }) </script> </body> </html>

 

最新回复(0)