vue点击当前元素切换class，并去掉兄弟的class

最新推荐文章于 2022-08-17 14:19:28 发布

六天鸭

最新推荐文章于 2022-08-17 14:19:28 发布

阅读量1k

点赞数 3

分类专栏： vue 选项文章标签： vue javascript html jquery js

本文链接：https://blog.csdn.net/weixin_48029998/article/details/106362421

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

选项

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <!--<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style type="text/css">
        .bluel {color: #f64346 !important;
              background-color: #fffefe !important;}
    </style>
</head>
<div id="app">
    <div>
        <div v-for="(todo, index) in list" v-on:click="addClass(index)" v-bind:class="{ bluel:index==abb}">
            {{ todo.texts }}
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            abb:0,
            list: [
                { texts: 实时' },
                { texts: '今日' },
            ]
        },
        methods:{
            addClass:function(index){
                this.abb=index;
            }
        }
    })
</script>

</script>
</html>

六天鸭

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue点击当前元素切换class，并去掉兄弟的class

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <!--<script src="https://cd
复制链接

扫一扫