实现如下页面效果:
页面样式:
<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)-蚊子-前端博客