vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性

最近vue的项目中需要使用v-for循环来动态的对div设置id已满足业务需求，上网查找了很多例子都只是简单的绑定了一个index，例如，：id = 'index' 的形式，发现满足不了需求，后台尝试了一下使用计算属性computed，但是发现computed的计算属性是无法接收参数的，只能随着vm中的数据的变化而动态的变化，后台无疑间发现，可以定义个mehtod,然后将index作为参数，函数对index拼接的结果进行返回即可。

代码思路如下：

vue实例的data属性中有一个对象数组

        arr:[{name:'张三'，age:12},{name:'李四'，age:13}

      html代码中arr动态的展示在div中，并且生成的div的id为person_{index}的形式，可以这么写

    <div v-for="(item,index) in arr"  :id="gernerateId(index)">

{{item.name}} : {{item.age}}

  </div>

然后在vue的method中定义gernerateId方法即可：

methods:{

gernerateId: function (index){

return "person_" +index

}

}

 

希望可以帮助小伙伴们！！！！

 

再后续的开发中发现还有更简单的方法就是绑定ID是的时候这样写：id=" 'person_'+ index" 的形式，注意person_必须用双引号引起来

转载：https://blog.csdn.net/xiongmaodeguju/article/details/78526594