vue 字符串索引变量_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}的形式,可以这么写

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

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

methods:{

gernerateId: function (index){

return "person_" +index

}

}

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值