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模板来展现json数据的代码
Oct 22 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
vue二级路由设置方法
Feb 09 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
js实现中文实时时钟
Jan 15 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/03 日漫
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
PHP 命名空间实例说明
2011/01/27 PHP
PHP中的事务使用实例
2015/05/26 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
php图片裁剪函数
2018/10/31 PHP
js实现的map方法示例代码
2014/01/13 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python psutil模块简单使用实例
2015/04/28 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python数学形态学实例分析
2019/09/06 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
django rest framework 自定义返回方式
2020/07/12 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
2015年教师党员自我评价材料
2015/03/04 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
国际贸易实训总结
2015/08/03 职场文书
学生会干部任命书
2015/09/21 职场文书
2016教师国培研修感言
2015/12/08 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript