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属性都有了不一样而且相互对应的值

巴特西

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

最新文章

热门文章