vue 点击当前元素添加class 去掉兄弟的class
Posted li-sir
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 点击当前元素添加class 去掉兄弟的class相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue 点击当前元素添加class 去掉兄弟的class</title> <link rel="stylesheet" href=""> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <!--<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>--> <script type="text/javascript" src="../js/vue.js"></script> <style type="text/css"> .blue color: #2175bc; </style> </head> <div id="app"> <ul> <li v-for="(todo, index) in todos" v-on:click="addClass(index)" 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) this.current=index; ) </script> </script> </html>
以上是关于vue 点击当前元素添加class 去掉兄弟的class的主要内容,如果未能解决你的问题,请参考以下文章
vue中点击div里的当前元素添加class删除其他兄弟元素的class?
vue中 $event 的用法--获取当前父元素,子元素,兄弟元素
vue中 $event 的用法--获取当前父元素,子元素,兄弟元素