点击当前标签给其添加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. 【20190405】JavaScript-整理一些常用正则式

    匹配中文字符: let reg=/([\u4E00-\u9FFF]+)/; //\u代表Unicode编码 匹配电话号码: let reg=/^1[34578]\d{9}$/; 给每三位数字添加一个逗 ...

  2. Net中获取程序集路径

      从内存中加载的程序集,无路径   IIS中路径 protected void Page_Load(object sender, EventArgs e) { Response.Write(&quo ...

  3. 德国慕尼黑.NET俱乐部VS2019发布活动

    就在广州.NET俱乐部紧锣密鼓的准备配合VS2019发布搞一场大Party的时候,德国慕尼黑.NET俱乐部早就已经对外宣布他们将会配合VS2019发布搞两场活动,注意,是两场哦,不是一场哦. 第一场是 ...

  4. iOS----------输入框UITextField禁止输入空格

    方法一:添加代理 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range rep ...

  5. Java 8 的Lambda表达式

    第一次看到用lambda表达式写出来的Java代码时,我对这种神秘的语法感到非常不理解,认为这样的Java搞得不可读.没有专门的去学习和认识,今天花了几个小时写了示例的练习后,我开心的看到了更清晰的J ...

  6. ext遍历表单中所有输入项，并全部设置为只读

    baseInfoForm.getForm().getFields().each(function (field) { // 设置只读 field.setReadOnly(true); })

  7. bat（批处理）命令(tomcat 7.0.75 startup.bat 命令集）

    本文主要介绍tomcat 7.0.75中startup.bat(位置:tomcat目录\bin)中涉及到的bat命令,为tomcat源码研究做准备. startup.bat中涉及到的bat命令如下: ...

  8. Saltstack_使用指南03_配置管理

    1. 主机规划 注意事项 修改了master或者minion的配置文件,那么必须重启对应的服务. 2. 了解YAML 具体地址 https://docs.saltstack.com/en/latest ...

  9. LeetCode算法题-Assign Cookies（Java实现）

    这是悦乐书的第234次更新,第247篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第101题(顺位题号是455).假设你是一个很棒的父母,并想给你的孩子一些饼干.但是,你 ...

  10. web框架开发-Django简介

    MVC与MTV模型 MVC Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业务 ...