vue中使用v-for循环li 怎么点击每个li中的em给添加class删除兄弟元素

<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>tab</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

    <style>

        html,

        body {

            height: 100%;

            margin: 0;

            padding: 0;

            background-color: #58596b;

        }

        .active {

            color: #fff;

            background: #e74c3c;

        }

        #app {

            width: 800px;

            height: 400px;

            margin: 100px auto;

            background-color: #fff;

            box-shadow: 0 1px 3px rgba(0, 0, 0, .1);

        }

        li {

            margin-bottom: 20px;

        }

        a {

            padding: 15px;

        }

    </style>

</head>

<body>

    <div id="app">

        <ul>

            <li v-for="item ,index  in dataList">

                <span>{{item.title}}</span>

                <a href="javascript:void(0)" v-for="option,i in item.children" @click='addoption(index,i)' :class="{active:item.index===i}">

                    {{option}}

                </a>

            </li>

        </ul>

    </div>

    <script>

        let data = [{

            title: "菜1",

            children: ["酸", "甜", "苦"]

        }, {

            title: "菜2",

            children: ["酸", "甜", "苦"]

        }, {

            title: "菜3",

            children: ["酸", "甜", "苦"]

        }, {

            title: "菜4",

            children: ["酸", "甜", "苦"]

        }]

        data.forEach(item => item.index = -1)

        new Vue({

            el: "#app",

            data: {

                dataList: data,

                index1: -1,

            },

            methods: {

                addoption(index, i) {　

                    console.log(index, i)　　　　　　　　　

                    this.dataList[index].index = i

                }

            }

        })

    </script>

</body>

</html>

结果图

vue中点击不同的em添加class去除兄弟级class的更多相关文章

  1. vue中点击添加class，双击去掉class

    VUE中 html 中 <ul id="shoppingList" v-on:click="addClass($event)" class="i ...

  2. vue中点击复制粘贴功能

    1.下载clipboard.js cnpm install clipboard --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard fro ...

  3. vue中点击空白处隐藏弹框（用指令优雅地实现）

    在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...

  4. 实例：vue中点击空白区域关闭某个div图层

    <template> <div class="search" ref="searchMain"> <el-input v-mode ...

  5. vue中点击屏幕其他区域关闭自定义div弹出框

    直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...

  6. vue中点击复制粘贴功能 clipboard 移动端

    页面是由 v-for 循环渲染出来,要给每一个结构里面的复制按钮加一个复制功能 npm install clipboard --save    安装,如果安装处问题,多安装几次,我自己也安装了好几次 ...

  7. vue中点击按钮自动截图并下载图片

    点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载 下载    html2canvas    npm install html2canvas  --save 引用 : import htm ...

  8. vue中点击按钮复制内容

    <el-button type="primary" round size="mini" @click="copyUrl">复制u ...

  9. vue.js 作一个用户表添加页面----初级

    使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...

随机推荐

  1. [转帖]Beyond compare4密钥

    Beyond compare4密钥 https://blog.csdn.net/lemontree1945/article/details/92963423 学习一下 最近想破解水卡.... w4G- ...

  2. [SourceTree] - 提交代码失败 "git -c diff.mnemonicprefix=false -c core.quotepath=false" 之解决

    背景 使用 SourceTree 提交代码失败,尝试了重装 SourceTree 和 Git 问题依旧. 错误信息 git -c diff.mnemonicprefix=false -c core.q ...

  3. （谷歌浏览器）前端以FormData类形成表单（含文件），通过ajax提交，PHP后端$_POST数组为空

    [错误信息] PHP获取不到前端发来的POST数据 [前端代码] [HTTP请求] [后端报错]

  4. Django框架（十二）-- 中间件、CSRF跨站请求伪造

    中间件 一.什么是中间件 请求的时候需要先经过中间件才能到达django后端(urls,views,templates,models) 响应的时候也需要经过中间件才能到达web服务网关接口 djang ...

  5. 简单端口映射、转发、重定向工具-Rinetd

    一.简介 Rinetd是为在一个Unix和Linux操作系统中为重定向传输控制协议(TCP)连接的一个工具.Rinetd是单一过程的服务器,它处理任何数量的连接到在配置文件etc/rinetd中指定的 ...

  6. centos 7安装jdk并封装service服务

    一.概述 有一个Spring Cloud的jar包,文件名为:RDS.jar.必须要jdk1.8版本,需要部署在 Centos 7.5的服务器上面,最好能设置开机自启动! 二.安装jdk 关闭防火墙 ...

  7. linux 文件夹分享

    1.在 linux 安装 samba,安装好之后 配置文件在 /etc/samba/smb.conf 目录下. yum install samba samba-client(yum install s ...

  8. 全网独发gensim中similarities.Similarity用法

    index = similarities.MatrixSimilarity(lsi[corpus]) # 管网的原文翻译如下: 警告:similarities.MatrixSimilarity类仅仅适 ...

  9. python入学代码

    liwenhu=100 if liwenhu>=90: print("你很棒") elif liwenhu>=80: print("你很不错") e ...

  10. 神奇的外部嵌套（使用ROW_NUMBER()查询带条件的时候提示列名无效）

    declare @pageIndex int -- 第几页 declare @pageSize int -- 每页包含的记录数 --这里注意一下,不能直接把变量放在这里,要用select select ...