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兼容标准的表格变色效果
Jun 28 Javascript
JavaScript Array扩展实现代码
Oct 14 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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面向对象public private protected 访问修饰符
2013/06/30 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
Servlet如何得到服务器的信息
2015/12/22 面试题
保险专业自荐信范文
2014/02/20 职场文书
住宅使用说明书
2014/05/09 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
催款律师函范文
2015/05/27 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
python数字类型和占位符详情
2022/03/13 Python