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 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
详解用node编写自己的cli工具
May 23 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 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
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
javascript实现拖放效果
2015/12/16 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Python如何转换字符串大小写
2020/06/04 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
书法比赛获奖感言
2014/02/10 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
美术毕业生求职信
2014/02/25 职场文书
2014年终工作总结范本
2014/12/15 职场文书
会议室管理制度范本
2015/08/06 职场文书
小学运动会入场口号
2015/12/24 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python