<!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. vue.js ------ 大牛和网站

    hellogirl前端网站 : http://www.jqhtml.com/category/article FungLeo: http://blog.csdn.net/FungLeo/article ...

  2. jQuery中表单的常用操作（全选、反选）

    表单的全选.反选操作一 <form method="post" action=""> 你爱好的运动是?<input type="ch ...

  3. P1576 最小花费

    题目背景 题目描述 在n个人中,某些人的银行账号之间可以互相转账.这些人之间转账的手续费各不相同.给定这些人之间转账时需要从转账金额里扣除百分之几的手续费,请问A最少需要多少钱使得转账后B收到100元 ...

  4. C语言中 fputs() fgets() 的使用方法

    一.读字符串函数fgets函数的功能是从指定的文件中读一个字符串到字符数组中,函数调用的形式为: fgets(字符数组名,n,文件指针): 其中的n是一个正整数.表示从文件中读出的字符串不超过 n-1 ...

  5. 解方程求PH值，POJ(2006)

    题目链接:http://poj.org/problem?id=2006 解题报告: 题意看了半天,没看懂,再加上化学没学好,更加让我头痛. 假设1L溶解了x摩尔的酸:ka=m*x*nx/ori-x; ...

  6. ioc 的好文章 转自 GavinJun

    https://www.cnblogs.com/fuchongjundream/p/3873073.html

  7. CentOS上安装mongodb

    安装mongodb pymongo修改yum源vi /etc/yum.repos.d/10gen.repo[10gen]name=10gen Repositorybaseurl=http://down ...

  8. Media所有参数汇总

    Media所有参数汇总 我们最常需要用到的媒体查询器的三个特性,大于,等于,小于的写法.媒体查询器的全部功能肯定不止这三个功能,下面是我总结的它的一些参数用法解释: width:浏览器可视宽度. he ...

  9. ADO.net中常用的对象有哪些？

    ADO.net中常用的对象有哪些?分别描述一下. 答:Connection 数据库连接对像 Command 数据库命令 DataReader 数据读取器 DataSet 数据集 DataReader与 ...

  10. Java学习过程中的收获

    1. String <--> Date 这种转换要用到java.text.SimpleDateFormat类 字符串转换成日期类型: 方法1: 也是最简单的方法 Date date=new ...