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 弹出登录窗口实现代码
Dec 24 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
Vue父子组件传值的一些坑
Sep 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中文本操作的类
2007/03/17 PHP
PHP_MySQL教程-第一天
2007/03/18 PHP
php5 图片验证码实现代码
2009/12/11 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
Yii中表单用法实例详解
2016/01/05 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
Python字典,函数,全局变量代码解析
2017/12/18 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Django 路由控制的实现代码
2018/11/08 Python
Python调用服务接口的实例
2019/01/03 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
初中体育教学反思
2014/01/14 职场文书
静心口服夜广告词
2014/03/20 职场文书
六年级学生评语
2014/04/22 职场文书
法人委托书
2014/07/31 职场文书
授权委托书格式范文
2014/08/02 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书