vue中怎么给一个div动态添加class

我要的效果是点击一个div，这个div是循环出来的，点击那个让哪一个加边框，再点击他的话边框消失，这个应该怎么做

javascript vue.js

阅读 14.3k

5 个回答

程序媛花花

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
<div id="app">
    <ul id="omain">
        <li v-for="(item,index) in data">
            <div @click="showIndex = index" :class="{'divborder':showIndex == index}"> show {{ item }}</div>
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data(){
            return {
                data: ['aa', 'bb', 'cc'],
                showIndex: 0
            }
        }

    })
</script>
<style>
    .divborder {
        border: 1px solid #ddd;
    }
</style>
</body>

Mikasa

986117

发布于
2017-11-13

初始化isActive变量为false，点击时候切换，自动切换div类名active是否拥有

<div v-bind:class="{ active: isActive }" @click="!isActive"></div>

nanaistaken

58914

发布于
2017-11-21

第一个答案是对的！思路就是需要一个flag，点击事件去改变这个flag的值，而这个flag再去改变那个class的有无

空白格

3115

发布于
2020-06-12

更新于
2020-06-12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
<div id="app">
    <ul id="omain">
        <li v-for="(item,index) in data">
            <div @click="showIndex(index)" :class="{'divborder':isShow == index}"> show {{ item }}</div>
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data(){
            return {
                data: ['aa', 'bb', 'cc'],
                isShow: Number
            }
        },
        methods:{
            showIndex(index) {
                if (this.isShow == index) {
                    this.isShow = null;
                } else {
                    this.isShow = index;
                }
            }
        }

    })
</script>
<style>
    .divborder {
        border: 1px solid #ddd;
    }
</style>
</body>

借用楼上的代码

littleStar

362712

发布于
2017-11-21

更新于
2017-11-21

<div  @click="changeClass"></div>

changeClass(){
    $(window.event.target).toggleClass("className");
}

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

vue中怎么给一个div动态添加class

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

js如何在并发中同步两个fetch请求？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？