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里打印内容也不执行，想问问大家是哪里出错了。