vue에서 addClass, removeClass 처럼 사용

HTML

<div id="app">

<ul>
    <li @click="activate(1)" :class="{ active : active_el == 1 }">Link 1</li>
    <li @click="activate(2)" :class="{ active : active_el == 2 }">Link 2</li>
    <li @click="activate(3)" :class="{ active : active_el == 3 }">Link 3</li>
</ul>

</div>

 

SCRIPT

var app = new Vue({

    el:"#app",

    data:{

    active_el:0

   },

   methods:{

   activate:function(el){

   this.active_el = el;

    }

  }

});

CSS

ul > li:hover {

	cursor:pointer;

}

.active {

    color:red;

    font-weight:bold;

}