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 学习书 推荐
Jun 13 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
php正则修正符用法实例详解
2016/12/29 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
用JavaScript隐藏控件的方法
2009/09/21 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python单元和文档测试实例详解
2019/04/11 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
C语言中break与continue的区别
2012/07/12 面试题
资产经营总监岗位职责
2013/12/04 职场文书
优秀演讲稿范文
2013/12/29 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python