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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
vue实现购物车选择功能
Jan 10 Javascript
js判断鼠标移入移出方向的方法
Jun 24 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
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
原生js实现公告滚动效果
2021/01/10 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
原生js实现购物车
2020/09/23 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python程序语言快速上手教程
2012/07/18 Python
python list使用示例 list中找连续的数字
2014/01/27 Python
Python操作json数据的一个简单例子
2014/04/17 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python装饰器与递归算法详解
2016/02/18 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
python脚本和网页有何区别
2020/07/02 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
综合办公室个人的自我评价
2013/12/22 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
降价通知函
2015/04/23 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技