<!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. Object公用方法

    Object是所有类的父类,任何类都默认继承Object. Object类到底实现了哪些方法?   1．clone方法 保护方法,实现对象的浅复制,只有实现了Cloneable接口才可以调用该方法,否 ...

  2. hibernate课程 初探一对多映射2-1 一对多映射简介

    1 在数据库中用主外键的形式实现一对多的映射关系 2 hibernate 在一方设置集合set,表示多方

  3. iOS实现头像选取（照相或者图片库）、大小等比缩放、生成圆形头像

    //弹出actionsheet.选择获取头像的方式 //从相册获取图片 -(void)takePictureClick:(UIButton *)sender { // /*注:使用,需要实现以下协议: ...

  4. #include stdio.h(6)

    #include <stdio.h> int main() { //**************3.字符数组************** ] = {'i','P','\0','o','n' ...

  5. 解决Pandoc wasn't found.pdflatex not found on PATH

    解决nbconvert failed: Pandoc wasn't found.解决nbconvert failed: pdflatex not found on PATH 问题1描述 500 : I ...

  6. css3实现iPhone滑动解锁

    该效果的主要实现思路是给文字添加渐变的背景,然后对背景进行裁剪,按文字裁剪(目前只有webkit内核浏览器支持该属性),最后给背景添加动画,即改变背景的位置,背景动画效果如下(GIF录制时有卡顿,代码 ...

  7. jstl Maven 依赖导致的 Jar 包冲突

    概述 Jar 包冲突是日常开发过程中,时常会遇到的问题.本文介绍由 jstl 的 Maven 依赖导致的 Jar 包冲突问题,以及对应的解决方法. jstl 的 Maven 依赖配置 <depe ...

  8. 485和OPT

    也许很多人都以为嫁给美国公民最快要绿卡,其实还有一个更快的婚姻绿卡方式:嫁给485男/女.这是什么意思呢? 嫁给美国公民,配偶方最快会在4-5个月内获得条件绿卡,两年后才能获得永久绿卡.在这两年内,如 ...

  9. User Agent字符串列表

    User Agent字符串列表 --之心 User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA.它是一个特殊字符串头,是一种向访问网站提供 ...

  10. 【转载】#344 - Hidden Base Class Member Is Invoked Based on Declared Type of Object

    When you use the new modifier to hide a base class method, it will still be called by objects whose ...