vue 点击当前元素添加class 去掉兄弟的class
Posted 农码精神
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 点击当前元素添加class 去掉兄弟的class相关的知识,希望对你有一定的参考价值。
点击当前标签给其添加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的主要内容,如果未能解决你的问题,请参考以下文章
vue中点击div里的当前元素添加class删除其他兄弟元素的class?
vue中 $event 的用法--获取当前父元素,子元素,兄弟元素
vue中 $event 的用法--获取当前父元素,子元素,兄弟元素