点击当前标签给其添加class,兄弟标签class删除

然后获取当前点击元素的文字

演示地址: https://xibushijie.github.io/static/addClass.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>vue 点击当前元素添加class 去掉兄弟的class</title>

    <script src="../js/vue.js"></script>

</head>

<style type="text/css">

	ul li {cursor: pointer;}

	.blue {color: #2175bc;}

</style>

<body>

    <div id="app">

      <ul>

        <li v-for="(todo, index) in todos" v-on:click="addClass(index,$event)" 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,event){

            this.current=index;

　　　　　　 //获取点击对象

           var el = event.currentTarget;

           alert("当前对象的内容："+el.innerHTML);

        }

    }

})

</script>

</body>

</html>

　　

　　

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

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

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

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

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

  3. vue.js之获取当前点击对象(其实是套着vue的原生javascript吧，笑😊)

    转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴, ...

  4. vue中怎么实现获取当前点击对象this

    应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...

  5. 【笔记】js获取当前点击元素的索引

    以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...

  6. 获取id 获取当前点击元素节点的任意 属性

    <a id="haveproces" onclick="fnProces(event)" dataid="{{x.id}}" clas ...

  7. 通过this获取当前点击选项相关数据

    很多时候jquery只能或者应该回去一个集合.然后通过this获取触发时间的对象及相关属性 this.jq('#needsType').on("click", ".sel ...

  8. C# Chart 点击获取当前点击坐标和Series

    C# Chart 点击获取当前点击坐标和Series https://blog.csdn.net/wumuzhizi/article/details/47168989 2015年07月31日 13:5 ...

  9. jq获取当前点击的li是ul中的第几个？

    <script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').wid ...

随机推荐

  1. Java自学总结--简介

    学习Java一年多了,练习了很多,这条路真的很难走.还有半年多毕业的我整理整理所学习的笔记给大家分享主要也是让自己记忆加深.自学时用到的时阿发老师的教学视频,通俗易懂还有题库可以练习.最经典的就是阿发 ...

  2. 亚马逊 amazon connect（呼叫中心）

    背景 公司为提高客服部门沟通效率对接电话呼叫中心,调研后选择了亚马逊的Amazon Connect服务,因为是国外业务没有选择用阿里云,怕有坑. Amazon Connect后台 需要在后台创建“联系 ...

  3. Mac 终端 显示隐藏文件

    defaults write com.apple.finder AppleShowAllFiles Yes && killall Finder //显示隐藏文件 defaults wr ...

  4. QT日志系统

    今天给大家介绍下QT里面的日志系统,直接上代码 #include <QApplication> #include <iostream> #include "ThorH ...

  5. PJProject（2.6） 工程介绍

    pjlib pjlib\build\pjlib.vcproj pjlib_test pjlib\build\pjlib_test.vcproj pjsip_core pjsip\build\pjsip ...

  6. c#高级编程_第10版 云盘地址

    下载地址 链接:https://pan.baidu.com/s/1u8PcY4RJhRB1yfm-2XaTEQ 密码:159z

  7. 利用ZYNQ SOC快速打开算法验证通路（3）——PS端DMA缓存数据到PS端DDR

    上篇该系列博文中讲述W5500接收到上位机传输的数据,此后需要将数据缓存起来.当数据量较大或者其他数据带宽较高的情况下,片上缓存(OCM)已无法满足需求,这时需要将大量数据保存在外挂的DDR SDRA ...

  8. Java - String 的字面量、常量池、构造函数和intern()函数

    一.内存中的 String 对象 Java 的堆和栈 对于基本数据类型变量和对象的引用,也就是局部变量表属于栈内存: 而通过 new 关键字和 constructor 创建的对象存放在堆内存: 直接的 ...

  9. [经验总结] 从其它sheet页引用数据生成图表时没有图例的解决办法

    1.先给出一个在有数据区域的sheet页中生成的图表,比较全,图表和图例全部都有,如下图: 2.但是如果在其它 sheet页中引用该有数据的sheet数据时并生成图表,生成的图表只有图表区域显示,图例 ...

  10. 初识shell编程

    1.shell编程之为什么学.怎么学 为什么学shell编程 Linux系统批量管理 提升工作效率,减少重复工作 学好shell编程所需要的基础知识 熟悉使用vim编辑器 熟悉SSH终端 熟练掌握Li ...