请老师解答下面的问题,
来源:2-5 列表动画
weixin_慕村1291783
2020-12-22 17:38:14
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.lm {
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() { return { list: [1, 2, 3] } },
methods: {
handleClick() {
this.list.push(this.list.length + 1)
},
handleItemClick() {
//请问老师怎么在方法里面拿到点击的那个数组元素的索引,课程里面没讲,想要删除对应点击的那个元素应该怎么写
this.list.splice(index, 1)
}
},
template: `<div @click="handleItemClick" class='lm' v-for="(item,index) in list" :key="item">{{item}}</div>
<button @click="handleClick">增加</button>`
})
const vm = app.mount('#root')
</script>
</html>
2回答
好帮手慕久久
2020-12-23
同学你好,问题解答如下:
1、这样写,就相当于把点击事件的处理函数写成了一个箭头函数;当点击事件触发时,箭头函数中的handleItemClick(index)就会执行,此时index索引,就传入到handleItemClick方法中了。
2、由于代码的实现方式并不唯一,老师给你提供的这种方式,只是其中一种实现方式,同学如果不理解,还可以参考下面的方式:
这两种方式都可以实现传参,同学记住用法,以后遇到了,选择其中一种即可。
祝学习愉快!
好帮手慕久久
2020-12-22
同学你好,可以如下这样写:
祝学习愉快!
相似问题