Vue dynamically add and delete input

Vue dynamically add and delete input

Delete i hide it

<el-button v-on:click="addss()">添加</el-button>
<div v-for="(list,index) in lists">
        <ul class="add-line">
          <li class="add-line" >
            <el-input v-model="list.name" placeholder="请输入名称" ></el-input>
            <el-input v-model="list.proper" placeholder="请输入属性" ></el-input>
          </li>
<!--          <li class="add-line">-->
<!--            <el-button type="danger" icon="el-icon-delete" circle v-on:click="del(index)"></el-button>-->
<!--          </li>-->
        </ul>
      </div>

data() {
    return {
      lists:[{
        name:" ",
        proper:" ",
      }],
     
   
  },
methods:{
addss(){
      let cope = {
        name:"",
        tel:""
      }
      this.lists.push(cope);
      console.log(this.lists)
    },
    // del(index){
    //   this.lists.splice(index,1);
    //   console.log(this.lists)
    // },
}