<!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>
