vue实现文字颜色切换功能，if条件内不执行，请问这个应该怎么改才正确。

Question

<div id="list"> <ul> <li v-on:click="loadAddColor" class="clickBox" v-for="list in lists">{{list.name}}</li> </ul> </div> <script type="text/javascript"> var oUl = document.getElementById("list"); var oLi = oUl.getElementsByTagName("li"); new Vue({ el:"#list", data:{ lists:[ {name:"aaaa"}, {name:"bbbb"}, {name:"cccc"}, {name:"dddd"}, {name:"eeee"} ] }, methods:{ addClass:function(obj){ for(var i=0;i<oLi.length;i++){ console.log("cc"); if(oLi[i] == obj){ oLi[i].className = "on"; }else{ oLi[i].className = ""; } } }, loadAddColor:function(){ for(var i=0;i<oLi.length;i++){ this.$options.methods.addClass(this); } } } }) </script> 最近在学Vue，想实现这个功能，就把js代码拿过来做了修改，但是执行时发现点击文字并没有变色，if里打印内容也不执行，想问问大家是哪里出错了。