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_必须用双引号引起来
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。