v-on: 绑定事件
简写@click=“del(i)”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05 事件绑定 </title>
<script src="../libs/vue.js"></script>
<style>
.list li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid green;
}
</style>
</head>
<body>
<div id="app">
<button @click="addList">添加</button>
<ul class="list">
<li v-for="(item,i) in list">
<span>{{item}}</span> <b v-on:click="del(i)">X</b>
</li>
</ul>
<table border="1" width="100%">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>手机</td>
<td>是否毕业</td>
<td>朋友</td>
<td>actions</td>
</tr>
<tr v-for="(item,i) in userInfo">
<td>{{i+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.phone}}</td>
<td>{{item.isFinish?'已经毕业':"未毕业"}}</td>
<td>
<ul>
<li v-for="friend in item.friends">
{{friend.name}} <b>x</b>
</li>
</ul>
</td>
<td> <button>删除</button></td>
</tr>
</table>
<button>删除全部</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
list: ["html", "css", "javascript", "vue"],
userInfo: [
{
name: "章三",
age: 20,
phone: "18911670519",
id: 1,
isFinish: false,
friends: [
{
name: "范冰冰"
},
{
name: "李冰冰"
}
]
},
{
name: "里斯",
age: 21,
phone: "18911670512",
id: 2,
isFinish: false,
friends: [
{
name: "肖战"
},
{
name: "王一博"
}
]
},
{
name: "班班",
age: 18,
phone: "18911670510",
id: 3,
isFinish: true,
friends: [
{
name: "赵四"
},
{
name: "刘能"
}
]
}
]
},
methods: {
//简写
del(i) {
// this.list.splice(i, 1)
//
this.list = this.list.filter((item, idx) => idx != i)
},
addList() {
// this.list.push()
this.list = [...this.list, 'M']
}
}
})
</script>
</body>
</html>
