点击当前标签给其添加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. FaaS技术框架

    FaaS介绍 微服务(MicroService)是以专注于单一服务/功能的小型单元块为基础,利用模块化的方式组合成复杂的大型应用服务. FaaS是Function as a Service的缩写,可以 ...

  2. jQuery.parseJSON()函数详解

    jQuery.parseJSON()函数用于将格式完好的JSON字符串转为与之对应的JavaScript对象. 所谓”格式完好”,就是要求指定的字符串必须符合严格的JSON格式,例如:属性名称必须加双 ...

  3. HTML的概念和三大基石以及标准文档结构

    HTML的概念: 概念:  HTML:超文本标记语言 作用:  需要将java在后台根据用户请求处理的请求结果在浏览器中显示给用户.  在浏览器中数据需要使用友好的格式展示给用户.  HTML是告诉浏 ...

  4. SAP MM ME1M报表结果不科学？

    SAP MM ME1M报表结果不科学? 做过SAP MM顾问的都知道,报表ME1M可以查询物料的info record列表,即是说可以以列表的形式批量显示多个物料的采购价格主数据. 但是这个报表有个不 ...

  5. c或c++利用scanf无限输入并进行简单操作如比大小等

    #include <iostream> using namespace std; int main() { ; ) //scanf返回值为int类型表示成功输入的数据数量个数 { if(n ...

  6. 转摘Linux命令工作中常用总结

    Linux命令工作中常用总结   1. 搜索 在vi和vim中如果打开一个很大的文件,不容易找到对应的内容,可以使用自带的搜索关键字进行搜索定位: 在vi和vim界面中输入:"/" ...

  7. C# 一般处理程序ashx接收服务端post过来json数据

    这个和前端js的接收方式有点不一样,前端接收用request.form["xxx"]即可

  8. Linux学习历程——Centos 7 mkdir命令

    一.命令介绍 mkdir 命令用于创建空白目录格式为“mkdir [选项] 目录”, 除了能够创建单个空白目录,还能结合 -p 参数来递归创建具有嵌套层叠关系的文件目录. -------------- ...

  9. 关于tomcat 配置时一闪而过的问题

    TOMCAT JAVA_HOME or JRE_HOME environment variable is not defined correctly 按照教程已经安装了JDK并设置好了JAVA_HOM ...

  10. windows10 1903 64位系统

    近日,微软完成并开始推送Windows 10 2019年的第一个重大升级的预览版本,版本号是v1903,命名则是2019年5月更新版. 点击下载windows10