<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. 基于springcloud框架搭建项目-Eureka篇(一)

    springcloud项目近年来算是很流行的了,不少公司项目目前都用到了,毕竟优点很多,刚好公司项目用到了,根据自己的理解,简单搭建一下,以便以后学习 这里简单的介绍一下它: SpringCloud, ...

  2. 数据结构之HashMap

    前言 在我们开发中,HashMap是我们非常常用的数据结构,接下来我将进一步去了解HashMap的原理.结构. 1.HashMap的实现原理 HashMap底层是基于Hash表(也称“散列”)的数据结 ...

  3. 黑科技神器-uTools

    Hello,各位小伙伴们好,又到周末了,小黑哥给大家分享一款神器:『utools』. 官网地址:https://u.tools/ uTools 是一个极简.插件化.跨平台的现代桌面软件.通过自由选配丰 ...

  4. Spring源码阅读笔记05:自定义xml标签解析

    在上篇文章中,提到了在Spring中存在默认标签与自定义标签两种,并且详细分析了默认标签的解析,本文就来分析自定义标签的解析,像Spring中的AOP就是通过自定义标签来进行配置的,这里也是为后面学习 ...

  5. OpenCV3入门(十三)图像运动模糊

    1.原理 运动模糊产生: 由于相机传感器或物体相对运动, 按快门瞬间造成图像产生运动模糊. 在用摄像机获取景物图像时,如果在相机曝光期间景物和摄像机之间存在相对运动,例如用照相机拍摄快速运动的物体,或 ...

  6. jupyter 安装问题 building 'zmq.libzmq' extension error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http://landinghub.visualstudio.com/visual-cpp-build-tools

    1.用pip install jupyter 安装到一半就报错 错误提示: building 'zmq.libzmq' extension error: Microsoft Visual C++ 14 ...

  7. 谈谈一些逻辑相同,性能差异却很大的sql

    总结写在前面: 1. 本篇讲述了三个例子,其本质都是揭示了若对索引字段做函数操作,可能会破坏索引值的有序性,由此优化器就决定放弃走树搜索功能. 2. 由第1点提供了一个优化思路,即我们能否避免或转化s ...

  8. 解决QQ“抱歉,无法发起临时会话,您可以 添加对方为好友以发送消息”

    很多网站,目前无法发起临时会话,自己在找网上找到教程,特分享给大家.自从2014年3月1日开始,网站上放置QQ客服代码的网站,在点击联系QQ时,以前可以正常发起临时会话的,现在提示:“抱歉,无法发起临 ...

  9. Session的常用方法

    Session的常用方法 session对象主要用于属性操作和会话管理,常用方法如下: 1.public void setAttribute(String name,String value)设定指定 ...

  10. java-接口(新手)

    //创建的一个包名. package jiekou; //接口方法. //创建一个接口并且起名字. public interface JK { //抽象的返回值.(具体功能未定义,需要自己定义) ab ...