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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
ExtJS的FieldSet的column列布局
Nov 20 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 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中cookie和session的区别实例分析
2014/08/28 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
如何使用angularJs
2017/05/08 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
python re正则表达式模块(Regular Expression)
2014/07/16 Python
python二分查找算法的递归实现方法
2016/05/12 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python如何生成网页验证码
2018/07/28 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
学校读书活动总结
2014/06/30 职场文书
二十年同学聚会感言
2015/07/30 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python