vue中点击不同的em添加class去除兄弟级class
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的更多相关文章
- vue中点击添加class，双击去掉class
VUE中 html 中 <ul id="shoppingList" v-on:click="addClass($event)" class="i ...
- vue中点击复制粘贴功能
1.下载clipboard.js cnpm install clipboard --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard fro ...
- vue中点击空白处隐藏弹框（用指令优雅地实现）
在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...
- 实例：vue中点击空白区域关闭某个div图层
<template> <div class="search" ref="searchMain"> <el-input v-mode ...
- vue中点击屏幕其他区域关闭自定义div弹出框
直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...
- vue中点击复制粘贴功能 clipboard 移动端
页面是由 v-for 循环渲染出来,要给每一个结构里面的复制按钮加一个复制功能 npm install clipboard --save 安装,如果安装处问题,多安装几次,我自己也安装了好几次 ...
- vue中点击按钮自动截图并下载图片
点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载 下载 html2canvas npm install html2canvas --save 引用 : import htm ...
- vue中点击按钮复制内容
<el-button type="primary" round size="mini" @click="copyUrl">复制u ...
- vue.js 作一个用户表添加页面----初级
使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...
随机推荐
- [转帖]Proof Of Work 工作量证明
Proof Of Work 工作量证明 https://www.cnblogs.com/zhang-qc/p/10451817.html 借鉴了 哈希现金(Hashcash)-1997年 英国密码学专 ...
- Java的含义
Java是一种广泛使用的计算机编程语言,拥有跨平台.面向对象.泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发. Java语言它不是软件,这里给各位初学者们详细解释一下.简单来说计算机语言 ...
- 使用matplotlib绘制3D函数图像
学习并尝试了利用matplotlib进行3D函数图像的绘制 import matplotlib.pyplot as plt # 绘图用的模块 from mpl_toolkits.mplot3d imp ...
- 数据采集，SCADA, 使用MQTT的方式来进行消息单/双向传输,什么场景使用MQTT
1.先来了解下: 看完得出关键字:发布.订阅模式,事件驱动,主题,生产与消费解耦 2.轻量级 普通的socket连接对服务器的消耗太大了,socket服务端是很消耗资源的,一台服务器能链接的客户端是有 ...
- Http、RESTful、RPC、MQ、Socket 概念与区别
若要转载本文,请务必声明出处:https://www.cnblogs.com/zhongyuanzhao000/p/11700815.html 1. 关于HTTP: HTTP,即超文本传输协议,是一个 ...
- 2019vivo秋招提前批笔试题第3题
笔试的时候没做出来,就顺手截图了. 虽然知道要用动态规划做,但我一直就不太懂动态规划.笔试完又花了2小时把它做出来了.也不知道性能怎么样,但还好做出来了. def solution(n, toltal ...
- java之抽象类介绍
什么抽象方法和抽象类 抽象方法 在类里面定义的没有方法体且用关键字“abstract”来修饰的方法就是抽象方法,所谓的没有方法体指的是在方法声明的时候没有大括号以及其中的内容,而是直接在声明时在方法名 ...
- 转：什么是DIP、IoC、DI
DIP依赖倒置原则DIP(Dependency-Inversion Principles) IoC控制反转(Inversion of Control,IoC),简言之就是代码的控制器交由系统控制,而不 ...
- 在Centos7中创建.net core 项目，并用Apache做代理服务器部署.net core项目
这一篇实例记录一次用Centos7创建并部署.net core项目的过程,希望能帮到用到的小伙伴. Kestrel 是 ASP.NET Core 项目模板中包括的默认 Web 服务器,Kestrel可 ...
- dump net core windbg 内存分析
!dumpheap -stat //检查当前所有托管类型的统计信息 0:000> !dumpheap -stat //检查当前所有托管类型的统计信息 .... 00007ffdb9387a98 ...