<!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. c# 调用matlab

    1.返回一个整数 function [ a ] = testReturn( b ) %UNTITLED Summary of this function goes here % Detailed ex ...

  2. c#操作excel的一些记录

    //开启Excel APP            Excel.Application xlApp = new Excel.Application(); //获取程序下bin—>debug下的文件 ...

  3. java中关于冒泡排序算法的学习。

    在编程语言的学习中,排序算法在学习过程中是必须要掌握的,特别在新手的学习中,我们应该学会这些算法,本篇先介绍冒泡算法. 冒泡排序 设有一组待排序的数据: 3 2 4 5 7 1 我们需要使用冒泡排序来 ...

  4. 弹性布局 Flexible Box

    页面中任何一个元素都可以指定为 弹性布局(Flex) 属性:display 取值: 1.flex     将块级元素变为弹性布局容器 2.inline-flex   将行内元素变为弹性布局容器 兼容性 ...

  5. Python异常处理及元类

    一.异常处理 异常是错误发生的信号,一旦程序出错就会产生一个异常,如果该异常没有被应用程序处理,那么该异常就会跑出来,程序的执行也随之终止,也就是说异常就是一个事件,该事件会在程序执行过程中发生,影响 ...

  6. xcode import pod 文件不提示

    在使用第三方类库时,使用cocoaPods是非常方便的,具体使用方法可以参考:CocoaPods安装和使用教程 的安装使用方法.今天讨论的问题是,我在使用的时候遇到了一些问题:用cocoaPod si ...

  7. mysql ：SQL语句中的替换函数replace

    replace() 用第三个表达式替换第一个字符串表达式中出现的所有第二个给定字符串表达式. 语法 REPLACE ( 'string_expression1' , 'string_expressio ...

  8. Vim-命令合集

    命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filename 打开vim ...

  9. MySQL数据库实验三：连接查询

    实验三    连接查询 实验名称:连接查询(2课时) 一.实验目的 理解JOIN语句的操作和基本使用方法,掌握内连接.外连接.自身连接的概念和使用. 二.实验环境 是MS SQL SERVER 200 ...

  10. [译文]PHP千年虫(y2k compliance）

    时钟将我们无情地逼近2000年的最后一年,第二年厄运塞耶斯都预言前所未有的电脑故障在每一个可以想象的领域.通常被称为2000年问题,或千年虫,这种 情况很容易解释.程序解释两位在形成XX日期19 XX ...