vue的v-for之后的click事件

发布于 2022-09-11 18:35:14 字数 2274 浏览 21 评论 0

问题描述

用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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

纵性 2022-09-18 18:35:14

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>

回复收藏 0

~没有更多了~