vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性
2017-11-14 08:39
831 查看
最近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_必须用双引号引起来
代码思路如下:
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_必须用双引号引起来
相关文章推荐
- 给id属性用v-bind动态绑定对象和字符串
- vue使用v-for渲染列表属性需要:="items.attribute"绑定
- vue组件属性中字符串如何拼接变量?
- 如何使<a>标签中的 href 属性动态绑定
- label的for属性与inputde的id元素绑定
- JavaScript使用数组拼接字符串性能如何?
- GStreamer使用playbin,如何给动态生成的source组件设置属性?
- 解决PasswordBox的Password非依赖属性,而无法绑定的问题,以及常规命令如何使用
- 如何使用th:each属性迭代模板-原标题:How To Use th:each For Iteration In Thymeleaf Template?
- 使用dtree生成的树结构,ajax动态加载子节点后,如何绑定右键菜单?求助
- 如何在游标for循环中使用动态SQL语句?
- html的meta总结,html标签中meta属性使用介绍和 动态替换字符串
- 如何使用动态创建模板列并绑定数据(GridView,Repeater,DataGrid)
- 使用 SQL的 for xml path来进行字符串拼接
- 使用 SQL的 for xml path来进行字符串拼接 (group by)
- mysql使用参数化查询,like模糊查询,应如何拼接字符串
- 在使用dhtmlxconnection for java时如何动态传入查询参数
- JavaScript使用数组拼接字符串性能如何?
- 如何使用CommandArgument属性根据id删除记录
- android中如何使用自定义view,自定义控件属性,及动态自定义控件