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 本地预览的简单实现方法
Feb 18 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
JS轻量级函数式编程实现XDM二
Jun 16 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 sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
js继承的实现代码
2010/08/05 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
大学生军训广播稿
2014/01/24 职场文书
人事部经理岗位职责
2014/03/07 职场文书
法定代表人授权委托书
2014/04/04 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
地方课程教学计划
2015/01/19 职场文书
个人承诺书格式范文
2015/04/29 职场文书
蜗居观后感
2015/06/11 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书