<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>vue 点击当前元素添加class 去掉兄弟的class</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">

        .blue {color: #2175bc;}

    </style>

</head>

<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;

            }

        }

    })

</script>

</script>

</html>

效果:

演示地址:

https://xibushijie.github.io/static/addClass.html

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

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

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

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

    <div id="app"> <ul> <li v-for="(todo, index) in todos" v-on:click ...

  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. jar包介绍

    1.基本jar包 4+1:4个核心(beans+core+context+expression)+一个依赖(commons-logging...)

  2. 使用dtd--属性声明

    <!ATTLIST 元素名 属性名称 属性类型 属性特点> 1.属性类型 类型 含义 CDATA 纯文本 enumerated 枚举类型 ID 以属性的方式唯一标识改元素,必须以字母开头 ...

  3. AngularJS 学习（-）Hello world

    早期的AngularJS使我们的前端开发模式发生很大的变化,基使用MVC. Model - html 模板:Controller - js脚本; Model 来自于Web API 或其他Service ...

  4. spring各版本之间的特性增加

    一.Spring3.0以后不再提供一个大的完整的jar包,而是分成20个小的jar包: org.springframework.aop, 包含在应用中使用Spring的AOP特性时所需的类. org. ...

  5. Spring课程 Spring入门篇 3-2 Spring bean装配（上）之bean的生命周期

    课程链接: 本节主要讲了三大块内容 1 bean的生命周期概念 2 bean的初始化和销毁的三种方式对比(代码演练) 3 总结 1 bean的生命周期概念 1.1 bean的定义:xml中关于bean ...

  6. Struts2_简单数据验证

    在Action 中添加 FieldError if(name == null || !name.equals("admin")){ this.addFieldError(" ...

  7. Ajax使用 初始化数据 + mvc

    2017-3-16 mvc+jquery+easyUI做项目 <input type="text" id="txtSTQty" name="tx ...

  8. mysql一些常用的查询语句总结

    工作中会遇到一些比较有用的mysql查询语句,有了它,可以对mysql进行更全面的维护和管理,下面就写一下我记录的 1.按照字段ru_id查询dsc_order_goods表中ru_id出现次数由多到 ...

  9. MySQL的四种主要存储引擎

    在数据库中存的就是一张张有着千丝万缕关系的表,所以表设计的好坏,将直接影响着整个数据库.而在设计表的时候,我们都会关注一个问题,使用什么存储引擎.等一下,存储引擎?什么是存储引擎? 什么是存储引擎? ...

  10. Metasploitable渗透测试实战——生成木马

    攻击机:kali 目标机:windows 1.生成木马  wincap发送至本机 2.进入msf  (命令:msfconsole)启动监听 3.当目标点击test.exe(可伪装)时,触发后门,实现入 ...