vue实现对数据的渲染和删除

实现如下页面效果：

页面样式：

 <style>
      *{padding:0;margin: 0;}
      tr{line-height: 40px; }
      th,td{text-align: center; border: 1px solid #ccc;}
      ul{width:12.5rem; box-sizing: border-box; display: -webkit-box;  -webkit-box-orient:horizontal; -webkit-box-pack: center;}
      li{display: block; }
      li:after{content: '|';padding: 0 10px;}
      li:last-of-type:after{content: '';}
      th,td{width: 5rem; text-align: center;}
    </style>

对数据进行渲染，并添加删除事件

 <div id="app">
        <table>
             <tr>
                <th>序号</th>
                <th>名字</th>
                <th>年龄</th>
                <th>性别</th>
                <th>兴趣爱好</th>
                <th>操作</th>
             </tr>
             <tr v-for="(item,index) in users">
                 <td>{{item.id}}</td>
                 <td>{{item.username}}</td>
                 <td>{{item.age}}</td>
                 <td>{{item.gender}}</td>
                 <td><ul><li  v-for=" value in item.hobby">{{value}}</li></ul></td>
                 <td><button @click="del(index)">删除</button></td>
             </tr>
        </table>
    </div>

     var app=new Vue({
          el:"#app",
          data:{
            users:[
                   {
                     id:1,
                     username:"小明",
                     age:18,
                     gender:"男",
                     hobby:['篮球','游泳','唱歌']
                   },
                   {
                     id:2,
                     username:"小兰",
                     age:14,
                     gender:"女",
                     hobby:['唱歌','游泳','唱歌']
                   },
                   {
                     id:3,
                     username:"小界",
                     age:19,
                     gender:"男",
                     hobby:['篮球','街舞']
                   },
                   {
                     id:4,
                     username:"小芳",
                     age:16,
                     gender:"女",
                     hobby:['羽毛球','跳舞','唱歌']
                   },
                   {
                     id:5,
                     username:"小花",
                     age:14,
                     gender:"女",
                     hobby:['读书']
                   },
                   {
                     id:6,
                     username:"小凯",
                     age:20,
                     gender:"男",
                     hobby:['篮球','编程','唱歌','足球']
                   }
            ]
          },
          methods:{
              del(e){
                   return this.users.splice(e,1);
              }

          }
      })

删除事件

利用splice()函数对数据进行删除操作

html部分 

<button @click="del(index)">删除</button>

JS部分

 del(e){
                   return this.users.splice(e,1);
              }

JavaScript splice() 函数

定义和用法

splice() 方法用于添加或删除数组中的元素。

注意：这种方法会改变原始数组。

实例1：向数组中添加新元素

 实例2：移除数组的第三个元素，并在数组第三个位置添加新元素

 实例3：从第三个位置开始删除数组后的两个元素：

 致敬高手：vue实现数据的增删改查 - 一块一 - 博客园​​​​​                   vue实现对数据的增删改查(CURD)-蚊子-前端博客