请老师解答下面的问题,

来源: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 {

            displayinline-block;

            margin-right10px;

        }

    </style>

</head>


<body>

    <div id="root"></div>

</body>

<script>

    const app = Vue.createApp({

        data() { return { list: [123] } },

        methods: {

            handleClick() {

                this.list.push(this.list.length + 1)

            },

            handleItemClick() {

                //请问老师怎么在方法里面拿到点击的那个数组元素的索引,课程里面没讲,想要删除对应点击的那个元素应该怎么写

                this.list.splice(index1)

            }

        },

        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、由于代码的实现方式并不唯一,老师给你提供的这种方式,只是其中一种实现方式,同学如果不理解,还可以参考下面的方式:

http://img.mukewang.com/climg/5fe29f810916468b09140274.jpg

这两种方式都可以实现传参,同学记住用法,以后遇到了,选择其中一种即可。

祝学习愉快!

0

好帮手慕久久

2020-12-22

同学你好,可以如下这样写:

http://img.mukewang.com/climg/5fe1c883094e09b913700424.jpg

祝学习愉快!

0
heixin_慕村1291783
hp>请问为什么这样写就可以呢?能讲解一下原理吗,那以后如果类似的情况 都要这么样来获取下标吗

h020-12-22
共1条回复

0 学习 · 15276 问题

查看课程