vue 实现v-for循环回来的数据动态绑定id


Posted in Javascript onNovember 07, 2019

如下所示:

vue 实现v-for循环回来的数据动态绑定id

代码效果图!!!!!

<ul>
<li v-for="(site,index) in sites" :key="index" :id="forId(index)">
 <span class="channel-li-li-border">
 <span class="firstLevel">{{site.name}}</span>
 </span>
</li>
</ul>
<script>
 new Vue({
 el: '#cat2s',
 data: function(){
 return {
 brandList: [],
 sites: [
   { name: '품질검수 서비스' },
   { name: '배송물류 서비스' },
   { name: '브랜드사 리스트'}
  ]
 }
 },
 methods: {
 forId:function(index){
 return "forid_" +index
 },
}
})
</script>

以上这篇vue 实现v-for循环回来的数据动态绑定id就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
索趣科技的答案
Feb 07 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
vue改变循环遍历后的数据实例
Nov 07 #Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 #Javascript
vue v-for直接循环数字实例
Nov 07 #Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 #Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 #Javascript
详解Angular cli配置过程记录
Nov 07 #Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 #Javascript
You might like
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
解析isset与is_null的区别
2013/08/09 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
Python wordcloud库安装方法总结
2020/12/31 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
服务员自我评价
2014/01/25 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
中班幼儿评语大全
2014/04/30 职场文书
关于保护环境的标语
2014/06/09 职场文书
2014年教师节寄语
2014/08/11 职场文书
2014年司法所工作总结
2014/11/22 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
产品调价通知函
2015/04/20 职场文书
社会实践活动总结格式
2015/05/11 职场文书
中小企业员工手册范本
2015/05/14 职场文书