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中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
JavaScript的Set数据结构详解
Feb 18 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
详解在Python中处理异常的教程
2015/05/24 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
自我评价是什么
2014/01/04 职场文书
优秀员工获奖感言
2014/03/01 职场文书
年终考核实施方案
2014/05/26 职场文书
酒店辞职书范文
2015/02/26 职场文书
委托收款证明
2015/06/23 职场文书
新闻稿怎么写
2015/07/18 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
教师素质教育心得体会
2016/01/19 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
python基础入门之普通操作与函数(三)
2021/06/13 Python