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屬性都有了不一樣而且相互對應的值