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中的布尔运算符使用介绍
Nov 20 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
js中DOM事件绑定分析
Mar 18 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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支持页面回退的两种方法
2008/01/10 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
python xlsxwriter模块的使用
2020/12/24 Python
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
志愿者活动总结报告
2014/06/27 职场文书
介绍信范文
2015/01/31 职场文书
初三毕业感言
2015/07/31 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
家访教师心得体会
2016/01/23 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL