<div id="app">
<ul>
<li v-for="(todo, index) in todos" v-on:click="addClass(index)" v-bind:class="{ blue:index==current}">{{ todo.text }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
current:0,
todos: [
{ text: '选项一' },
{ text: '选项二' },
{ text: '选项三' }
]
},
methods:{
addClass:function(index){
this.current=index;
}
}
})

Vue点击当前元素添加class 去掉兄弟的class的更多相关文章

  1. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  2. vue 点击当前元素添加class 去掉兄弟的class

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. vue不同序号的元素添加不同的样式

    vue不同序号的元素添加不同的样式 一.总结 一句话总结: 在vue中设计一个样式的数据数组来遍历即可 <script> new Vue({ el:'#review_exam_part', ...

  4. jquery实现点击进行跳转后,改点击的元素添加选中的效果

    <style> .active { color: red; } </style> //html代码 <ul id="tab2"> <li& ...

  5. vue 点击当前元素改变样式

    template  <ul>    <li v-for="(relation,index) in relations" v-bind:id="relat ...

  6. vue.js实现点击后动态添加class及删除同级class

    最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还 ...

  7. vue中点击添加class,双击去掉class

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

  8. 在vue中的点击事件怎么获取当前点击的元素

    首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如<button @click = “click ...

  9. Vue中,给当前元素添加类名移除兄弟元素类名的方法

    在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...

随机推荐

  1. python自动化第一课 - python安装以及pycharm配置

    1.安装python 1.1打开python官网https://www.python.org/downloads/windows/进行下载Python 3.8.0 1.2下载完毕后进行安装,1勾选 A ...

  2. 转:标签中的href如何调用js

      在HTML中,<a>标签的href属性用于指定超链接的目标的URL.在所有浏览器中,链接的默认外观是: 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动 ...

  3. Vue2.0 【第一季】第3节 v-for指令:解决模板循环问题

    目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...

  4. C++ 文件操作 FILE*

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> //编程题:往文件里写入字母表的26个字母. //要求:如果字母对应编码值 是奇数则写 ...

  5. Java的反射基础技术

    今天本人给大家讲解一下Java的反射基础技术,如有不对的或者讲的不好的可以多多提出,我会进行相应的更改,先提前感谢提出意见的各位了!!! 什么是反射? 反射它是根据字节码文件可以反射出类的信息.字段. ...

  6. 今天开dev的时候,config update一下别人的,但是忘了自己改过目录了,导致光看ip,想了半天,为什么接口不对

    今天开dev的时候,config update一下别人的,但是忘了自己改过目录了,导致光看ip,想了半天,为什么接口不对 baseUrl: {     //     // dev: 'http://1 ...

  7. Axure 文本框去掉边框 富文本 粘贴文字图标

    在今天做原型的过程中,碰到两个问题: 1 文本框该如何去掉边框 2 富文本粘贴文字图标 第一个问题:首先是思路错了,又跑到元件上面找边框,跑到style里面去border的线,结果是不成功. 正解:属 ...

  8. Fluent算例精选|02瞬态滑移网格分析叶轮机械内部流动

    本算例使用的软件:fluent.icem 通过学习本算例您将获得? 1.学会周期区域创建 2.学会瞬态求解器及滑移网格边界条件设置 3.学会周期面.滑移面设置 4.学会如何监测压力脉动(声学仿真) 5 ...

  9. Koadic的安装和使用

    概述 Koadic是DEFCON分型出来的一个后渗透工具,主要通过vbscript.jscript进行大部分操作 环境准备 我准备的是两台虚拟机一台kali就是攻击机器一台windows7 64位就是 ...

  10. Hook集合----SSDTHook(x86 Win7)

    最近在学习Ring0层Hook的一些知识点,很久就写完SSDTHook的代码了,但是一直没有整理成笔记,最近有时间也就整理整理. 介绍: SSDTHook 实质是利用Ntoskrnl.exe 中全局导 ...