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中的几个关键概念的理解-原型链的构建
May 12 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
Angular的事件和表单详解
Dec 26 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
es5 类与es6中class的区别小结
Nov 09 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
使用adodb lite解决问题
2006/12/31 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
JavaScript中的事件处理
2008/01/16 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python set集合类型操作总结
2014/11/07 Python
Python中tell()方法的使用详解
2015/05/24 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
关于环保的标语
2014/06/13 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
学校运动会简讯
2015/07/20 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
MySQL系列之十一 日志记录
2021/07/02 MySQL
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Python基础 括号()[]{}的详解
2021/11/07 Python
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL