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 相关文章推荐
用jquery来定位
Feb 20 Javascript
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
JavaScript流程控制(分支)
Dec 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
JavaScript延迟加载
2021/03/09 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python生成验证码实例
2014/08/21 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
理解Python垃圾回收机制
2016/02/12 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
Python文件读写常见用法总结
2019/02/22 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
弘扬雷锋精神演讲稿
2014/05/10 职场文书
社区志愿者活动方案
2014/08/18 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫