Vue——v-for动态绑定id的问题

问题：在Vue中，会遇到许多个多选框，倘若数量很庞大那么一个一个input框、label节点寻找，这样操作很繁琐。

 

 直接上解决方案吧：

html页面：

<ul v-for="(item,index) in provinces1"><input type="checkbox" :id="ki(index)">
        <label :for="ki(index)">{{item.name}}</label></ul>

注意：其中的input框的id和label中的for是被绑定的。（：是v-bind：的简写）

js代码：

var vm = new Vue({
        el: '#box',
        data: {
            provinces1: [{ name: '牛大力'},
                { name: '猫大力'},
                { name: '猪大力'}
            ]},
         methods: {
            ki: function (i) {//此处通过v-bind响应，然后返回id的值。
                return "step" + i
            }}
          });

其中的i就是index，也就是provinces1中数组的下标。

效果：

 

 可以看到，id和for属性都有了不一样而且相互对应的值