点击事件传参
1、 购物车案例
目标
完成商品浏览和删除功能, 当无数据给用户提示
需求:
- 需求1: 根据给的初始数据, 把购物车页面铺设出来
- 需求2: 点击对应删除按钮, 删除对应数据
- 需求3: 当数据没有了, 显示一条提示消息
完成代码:
<template>
<div id="app">
<table class="tb">
<tr >
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<!-- 循环渲染的元素tr -->
<tr v-for="(item,index) in list" :key= "index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.time }}</td>
<td>
<button @click="del(index)">删除</button>
</td>
</tr>
<tr>
<td colspan="4" v-show="end" >没有数据咯~</td>
</tr>
</table>
</div>
</template>
<script>
// v-for 循环添加数据
// 事件点击 删除整行 找this.list
// 判断有无数据 显示v-show
export default {
data() {
return {
end:false,
list: [
{ id: 1, name: "奔驰", time: "2020-08-01" },
{ id: 2, name: "宝马", time: "2020-08-02" },
{ id: 3, name: "奥迪", time: "2020-08-03" },
],
}
},
methods : {
del(newArr) {
this.list.splice(newArr,1)
if (this.list.length === 0) {
this.end = true
}
},
}
};
</script>
<style>
#app {
width: 600px;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
完成过程中,删除一直出错,不是删除本次点击的列表行,是因为点击事件没有传参
<button @click="del(index)">删除</button>
2、加加减减
目标
点击生成按钮, 新增一个li(随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值
完成代码:
<template>
<div id="app">
<ul>
<li v-for="(item,index) in arr " :key="index" >
<span>{{ item }}</span>
<button @click="del(index)">删除</button>
</li>
</ul>
<button @click="add">生成</button>
</div>
</template>
<script>
// 生成 点击事件 生成随机数 添加一个li 和按钮
export default {
data() {
return {
arr:[],
};
},
methods : {
add() {
// 随机数
let number = Math.floor(Math.random() * 99)
this.arr.push(number)
console.log(this.arr.item)
} ,
del(index) {
this.arr.splice(index,1)
}
}
}
</script>
同样的问题,绝了!!!