1. 程式人生 > >vue 動態生成input進行操作——簡單實現新增刪除聯絡人功能

vue 動態生成input進行操作——簡單實現新增刪除聯絡人功能

實現類似的如圖功能:
這裡寫圖片描述

程式碼如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>修改實現新增聯絡人操作</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id
="app">
<div v-for="(list,index) in lists"> <ul> <li> <span>名字</span> <input type="text" v-model="list.name" style="width:100px"> </li> <li
>
<span>電話</span> <input type="text" v-model="list.tel" style="width:100px"> </li> <li> <button v-on:click="del(index)">刪除聯絡人</button> </li
>
</ul> </div> <button v-on:click="add">新增聯絡人</button> </div> </body> <script> var vm = new Vue({ el : "#app", data:{ tables : [], lists:[{ name:"wang", tel:"qwe" }] }, methods:{ add:function(){ let cope = { name:"", tel:"" } this.lists.push(cope); console.log(this.lists) }, del:function(index){ this.lists.splice(index,1); console.log(this.lists) } } }); </script> </html>