问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue的v-for之后的click事件

头像
EricDu
    331311

    问题描述

    用vue的for循环，写了一些div，但是我需要在绑定的div的子/孙节点上面添加click事件，我怎么取得当前的这个对象，或则怎么实现点击哪个 哪个变色的效果，而不是全部！！！ 我已经写了一个简单的页面，请帮忙调试！图片描述

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .boxlist {
            width: 100%;
            height: auto;
            border: 1px solid grey;
            padding: 20px;
        }

        .box {
            height: 100px;
            width: 100%;
            border: 1px solid green;
        }

        .showbox {
            width: 100%;
            height: 50px;
            background-color: bisque;
        }

        .editbox {
            width: 100%;
            height: 50px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="boxlist">
        <div class="box" v-for="item in list">
            <div class="showbox" v-if="showbox">
                <div class="title"></div>
                <div class="header">header</div>
                <input type="button" value="编辑" @click="showval" />
            </div>
            <div class="editbox" v-else>
                <div class="title">111</div>
                <input type="button" value="保存" @click="hideval" />
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: ".boxlist",
            data: {
                list: [1, 2, 3, 4, 5],
                showbox: true
            },
            methods: {
                showval: function () {
                    this.showbox = false
                },
                hideval: function () {
                    this.showbox = true
                }
            }
        })
    </script>
</body>

</html>
    javascriptvue.jscomponent
    阅读 5.3k
    1 个回答
    得票最新
    头像
    ntnyq
      1.2k2822
      ✓ 已被采纳

      list变成对象组成的数组
      比如

      [
      { num: 1, active: false},
      ...
      ]

      点击把把循环的那一项 active 设为true

      循环的时候那一项为true 加对应的类

      你的源码可以修改为如下：

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .boxlist {
            width: 100%;
            height: auto;
            border: 1px solid grey;
            padding: 20px;
        }

        .box {
            height: 100px;
            width: 100%;
            border: 1px solid green;
        }

        .showbox {
            width: 100%;
            height: 50px;
            background-color: bisque;
        }

        .editbox {
            width: 100%;
            height: 50px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="boxlist">
        <div class="box" v-for="item in list">
            <div class="showbox" v-if="item.active">
                <div class="title"></div>
                <div class="header">header</div>
                <input type="button" value="编辑" @click="item.active = false" />
            </div>
            <div class="editbox" v-else>
                <div class="title">111</div>
                <input type="button" value="保存" @click="item.active = true" />
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: ".boxlist",
            data: {
                list: [
                    { num: 1, active: false },
                    { num: 2, active: false },
                    { num: 3, active: false },
                    { num: 4, active: false },
                    { num: 5, active: false },
                ],
                showbox: true
            },
            methods: {
                showval: function () {
                    this.showbox = false
                },
                hideval: function () {
                    this.showbox = true
                }
            }
        })
    </script>
</body>

</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题