点击当前标签给其添加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. SuperMap iClient 如何使用 WMTS 地图服务（转载）

    原文链接: WMTS服务初步理解与读取 https://blog.csdn.net/supermapsupport/article/details/76806670 SuperMap iClient ...

  2. jQuery省市区三级联动菜单

    <style> select{ padding:5px 0; } .outer{ width:500px; margin:20px auto; } </style> <d ...

  3. Xshell工具使用--连接VMware虚拟机

    假设有这样的场景,开发者用的是Windows系统,且系统的存储资源和内存有限,在运行VMware虚拟机中做一些测试时,通常会碍于电脑的VMWare客户端图形界面的响应速度太慢.而在Xshell中对虚拟 ...

  4. 关于使用阿里OSS服务搭建图床和使用PicGO上传图片到图床

    最近喜欢上了使用markdown来写博客,可是markdown的图片却是本地的,如果我要发博客,那么又要重复截图了.于是干脆弄了个图床,本地截图的时候上传到图床,markdown中的代码结果也是图床里 ...

  5. SVN下载与安装

    首先打开浏览器上百度搜索“SVN”如下图: 或者点击:https://tortoisesvn.net/downloads.html 打开后链接后选择Downloads,选择需要下载的版本,比如我电脑是 ...

  6. aspnetcoremodule 2.1下载

    下载地址 or 云盘 aspnetcoremodule 2.1 页面地址 下载地址 云盘下载 链接:https://pan.baidu.com/s/1YKYzpP7E__yXQKpOVrN6nw 密码 ...

  7. 浅谈TCP IP协议栈(二)IP地址

    上一节大致了解TCP/IP协议栈是个啥东西,依旧是雾里看花的状态,有很多时候学一门新知识时,开头总是很急躁,无从下手,刚学会一点儿,却发现连点皮毛都不算,成就感太低,所以任何时候学习最重要的是要在合适 ...

  8. powerdesigner生成mysql带注释的ER图

    1.安装PowerDesigner的 参考 https://blog.csdn.net/sinat_34104446/article/details/79885141 2配置逆向工程 2.1新建模型p ...

  9. SQLServer之触发器简介

    触发器定义 触发器是数据库服务器中发生事件时自动执行的一种特殊存储过程.SQLServer允许为任何特定语句创建多个触发器.它的执行不是由程序调用,也不是手工启动,而是由事件来触发,当对数据库进行操作 ...

  10. SQLServer之FOREIGN KEY约束

    FOREIGN KEY约束添加规则 1.外键约束并不仅仅可以与另一表的主键约束相链接,它还可以定义为引用另一个表中 UNIQUE 约束的列. 2.如果在 FOREIGN KEY 约束的列中输入非 NU ...