点击当前标签给其添加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. Xamarin 学习笔记 - Page（页面）

    本文翻译自CodeProject文章:https://www.codeproject.com/Articles/1226447/Xamarin-Notes-Xamarin-Forms-Pages 转载 ...

  2. linux命令df中df -h和df -i

    df 命令: linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1．命令格式: df [选项] [ ...

  3. axios中的this指向问题

    最近在使用vue过程中,使用axios进行接口请求,确发现取不到值,返回为undefined. show (item) { let searchText = item.keyword console. ...

  4. Android开发中如何使用RecyclerView

    介绍 在Android应用程序中,只要您想显示数据列表,就可以使用 RecyclerView . 早期的Android提供 ListView 了同样的东西. RecyclerView 可以被认为是一个 ...

  5. 记录CentOS 7.4 上安装MySQL&MariaDB&Redis&Mongodb

    记录CentOS 7.4 上安装MySQL&MariaDB&Redis&Mongodb 前段时间我个人Google服务器意外不能用,并且我犯了一件很低级的错误,直接在gcp讲服 ...

  6. (办公)plug-in org.eclipse.jdt.ui was unable to load class org.eclipse.jdt.internal

    今天上午开发环境遇到这个问题,解决方案如下,(解决了之后,项目并没有丢失.) 因为Eclipse的这个plug-in org.eclipse.jdt.ui was unable to load cla ...

  7. Git：八、Git自定义：忽略特殊文件&配置别名

    1..gitignore配置文件 1)防止加入Git或输入git status时显示,需要让Git忽略的文件: 程序编译生成的非原代码的文件 存放密码的文件 2)配置文件:.gitignore Git ...

  8. Burpsuite 之intruder

    首先工具:Burpsuite1.7,DVWA,火狐浏览器代理插件,火狐浏览器,密码字典(以下用Bp代指burpsuite) 启动Bp,启动DVWA,并打开本地代理功能 ​ 开启bp的拦截功能,并在dv ...

  9. Windows 下端口被占用

    0. 参考 参考链接:  Windows下如何查看某个端口被谁占用 1. 遇到的问题 在 Windows 下的 IDEA 中启动 Web 服务显示 8080 端口被占用,程序无法正确启动. 2. 解决 ...

  10. SQLServer数据事务日志操作

    日志备份 (log backup) 包括以前日志备份中未备份的所有日志记录的事务日志备份. (完整恢复模式) 使用SSMS数据库管理工具备份事务日志 1.连接数据库,选择数据库->右键点击-&g ...