javascript - vue.js中如何为v-for渲染的多个li绑定事件？

Question

左边的号码用vue的v-for循环出来，代码如下

<p class="main-number">
            <ul>
                <li class="main-number-options" v-for="item in items" v-on:click="choose">
                    {{item.number}}
                </li>
            </ul>
</p>

js代码

var vm = new Vue({
        el:".main-number",
        data:{
            items:[
            {number:"01"},
            {number:"02"},
            {number:"03"},
            {number:"04"},
            {number:"05"},
            {number:"06"},
            {number:"07"},
            {number:"08"},
            {number:"09"},
            {number:"10"},
            {number:"11"},
            ]
        },
        methods:{
            choose: function () {
             
            }
        }
    })

现在我想给每个li绑定一个事件，让他们在点击的时候变成右边选中态红底白字的样式
请问vue有类似jquery事件代理委托的方法吗？有什么好的办法实现这种效果？

Answer 1

可以尝试这样:
改变items的结构为

{number:"01",isSelected:false}

li的class绑定一下样式 其中active class为红底白字的样式

class="main-number-options {{item.isSelected?'active':''}}"

li的点击事件传入循环变量

v-on:click="choose($index)"

choose方法只要改变当前的isSelected属性的值即可

  choose: function (index) {
         this.items[index].isSelected=true;
  }