問題描述

當我觸發其中一個的時候，想知道怎么獲取他的下標

<template> <header class='header'><p class='header_mission'> <span>任務通知</span> <span><ul class='list'> <li class='li'>111</li> <li class='li'>222</li> <li class='li'>333</li> <li class='li'>444</li> <li class='li'>555</li></ul> </span></p><content class='content'> <p class='bg_white'><p class='content_mission'> <span>我的任務<span style='padding: 0;'> ( 1 )</span></span> <span></span> <span @click='myMission'></span></p><p class='mission_list'> <ul><li> <span class='mission_img'><span class='mui-icon mui-icon-plusempty file'> <p class='vue-upload-img-multiple'><p v-if='images.length >0'> <ul> <li v-for='image in images'><img :src='http://m.propowerdrill.cn/wenda/image' /><a href='javascript:void(0);' ><span @click=’delImage($index)’></span></a> </li> </ul></p><p> <p v-if='!image'><input type='file' @change='onFileChange'> </p> <p v-else><img :src='http://m.propowerdrill.cn/wenda/image' /><button @click='removeImage'>Remove image</button> </p></p> </p></span> </span> <span class='mission_particulars'><p class='mission_details'> <span class='mission_name'>【四帶】老帶新</span> <span class='mission_score'><span>2</span>分</span></p><p class='mission_progress'><span>進行中</span></p><p class='mission_time_evaluation'> <span class='mission_time'>2017年6月</span> <span class='mission_evaluation'>評價:<span>3</span>人</span></p> </span></li><li> <span class='mission_img'><span class='mui-icon mui-icon-plusempty file'> <p class='vue-upload-img-multiple'><p v-if='img.length >0'> <ul> <li v-for='image in img'><img :src='http://m.propowerdrill.cn/wenda/image' /><a href='javascript:void(0);' ><span @click=’delImage($index)’></span></a> </li> </ul></p><p> <p v-if='!image'><input type='file' @change='onFileChange'> </p> <p v-else><img :src='http://m.propowerdrill.cn/wenda/image' /><button @click='removeImage'>Remove image</button> </p></p> </p></span> </span> <span class='mission_particulars'><p class='mission_details'> <span class='mission_name'>【四帶】老帶新</span> <span class='mission_score'><span>2</span>分</span></p><p class='mission_progress'><span>進行中</span></p><p class='mission_time_evaluation'> <span class='mission_time'>2017年6月</span> <span class='mission_evaluation'>評價:<span>3</span>人</span></p> </span></li> </ul></p> </p> <p class='bg_white marginTop'><p class='content_mission'> <span>歷史任務<span style='padding: 0;'> ( 1 )</span></span> <span></span> <span @click='missionHistorical'></span></p><p class='mission_historical_list'> <ul><li> <span class='mission_img'><img src='http://m.propowerdrill.cn/imgs/banner/banner_img_01.jpeg' alt='' /> </span> <span class='mission_particulars'><p class='mission_details'> <span class='mission_name'>【四帶】老帶新</span> <span class='mission_score'><span>2</span>分</span></p><p class='mission_progress'><span>進行中</span></p><p class='mission_time_evaluation'> <span class='mission_time'>2017年6月</span> <span class='mission_evaluation'>評價:<span>3</span>人</span></p> </span></li> </ul></p> </p> <p class='mission_situation'>查看黨小組任務情況</p> <p @click=’box’><span>這是一個span標簽</span></p></content> </header></template><script type='text/javascript'> module.exports = { name: ’Upload’, data: function(){return { images: [], img:[]} }, mounted(){this.init(); }, methods: {box(){ var box1=document.getElementById(’box’); box1.innerHTML='<p>這是一個P標簽</p>';},init(){ var list=document.getElementsByClassName(’list’)[0]; var li=document.getElementsByClassName(’li’); var i=1; var datajson; var scoll=function(){if(i==5){ i=0;}list.style.top =-43*i+’px’;i++; } setInterval(scoll,2000);},myMission(){ var mymission=document.getElementById(’myMission’); var missionList=document.getElementsByClassName(’mission_list’)[0]; var bgWhite=document.getElementsByClassName(’bg_white’)[0]; var claName=mymission.className; if(mymission.className==’mui-icon mui-icon-arrowright’){mymission.className='mui-icon mui-icon-arrowdown';missionList.style.display=’block’;bgWhite.style.paddingBottom='10px'; }else{mymission.className=’mui-icon mui-icon-arrowright’;missionList.style.display=’none’;bgWhite.style.paddingBottom='0'; }},missionHistorical(){ var missionhistorical=document.getElementById(’missionHistorical’); var missionHistoricalList=document.getElementsByClassName(’mission_historical_list’)[0]; var bgWhite2=document.getElementsByClassName(’bg_white’)[1]; if(missionhistorical.className==’mui-icon mui-icon-arrowright’){missionhistorical.className='mui-icon mui-icon-arrowdown';missionHistoricalList.style.display=’block’;bgWhite2.style.paddingBottom='10px'; }else{missionhistorical.className=’mui-icon mui-icon-arrowright’;missionHistoricalList.style.display=’none’;bgWhite2.style.paddingBottom='0'; }},onFileChange (e) { var files = e.target.files || e.dataTransfer.files if (!files.length) return this.createImage(files)},createImage (file) { var vm = this var reader = null var leng = file.length for (var i = 0; i < leng; i++) {reader = new window.FileReader()reader.readAsDataURL(file[i])reader.onload = function (e) { vm.images.push(e.target.result)} }},removeImage: function (e) { this.images = []; this.img=[]},delImage: function (index) { this.images.shift(index); this.img.shift(index)} }};</script><style> .marginTop{margin-top: 20px; } .header_mission{display: flex;background: white;border-bottom: 2px solid #E4E4E4; } .header_mission span{text-align: center;height: 43px;padding: 10px 0;overflow: hidden; } .header_mission span:first-child{flex: 1;font-weight: bold;color:red; } .header_mission span:last-child{flex: 3; } .header_mission span .list{position: relative;transition: top 500ms; } .header_mission span .list .li{list-style: none;height: 43px; } .content .bg_white{background: white; } .content_mission{display: flex;background: white;padding: 10px 0; } .content_mission span:first-child{flex: 1;padding-left: 15px;text-align: left; } .content_mission span:nth-child(2){flex: 1; } .content_mission span:last-child{flex: 1;text-align: right; } .mission_list,.mission_historical_list{display: none;margin: 10px; } .mission_list ul li, .mission_historical_list ul li{display: flex;border: 1px dashed #bbbbbb;margin-bottom: 20px; } .mission_list ul li .mission_img, .mission_historical_list ul li .mission_img{flex: 1;margin: 10px;text-align: center;display: inline-block;border: 1px dashed #bbbbbb; } .mission_list ul li .mission_particulars, .mission_historical_list ul li .mission_particulars{flex: 2;margin: 10px;display: inline-block; } .mission_list ul li .mission_particulars .mission_details, .mission_list ul li .mission_particulars .mission_progress, .mission_list ul li .mission_particulars .mission_time_evaluation, .mission_historical_list ul li .mission_particulars .mission_details, .mission_historical_list ul li .mission_particulars .mission_progress, .mission_historical_list ul li .mission_particulars .mission_time_evaluation{overflow: hidden;margin-bottom: 20px; } .mission_list ul li .mission_particulars .mission_time_evaluation, .mission_historical_list ul li .mission_particulars .mission_time_evaluation{margin-bottom: 0; } .mission_list ul li .mission_particulars .mission_details .mission_name, .mission_list ul li .mission_particulars .mission_time_evaluation .mission_time, .mission_historical_list ul li .mission_particulars .mission_details .mission_name, .mission_historical_list ul li .mission_particulars .mission_time_evaluation .mission_time{float: left; } .mission_list ul li .mission_particulars .mission_details .mission_score, .mission_list ul li .mission_particulars .mission_progress span, .mission_list ul li .mission_particulars .mission_time_evaluation .mission_evaluation, .mission_historical_list ul li .mission_particulars .mission_details .mission_score, .mission_historical_list ul li .mission_particulars .mission_progress span, .mission_historical_list ul li .mission_particulars .mission_time_evaluation .mission_evaluation{float: right; } .mission_list ul li input{width: 100%;overflow: hidden; } .mission_historical_list .mission_img img{width: 100%;height: 100%; } .mission_situation{background: rgb(255, 92, 56);color: white;text-align: center;height: 50px;line-height: 50px;font-size: 18px;margin-top: 20px; } .file {position: relative;display: inline-block;padding: 4px 12px;overflow: hidden;text-decoration: none;text-indent: 0;height: 100px;width: 100px;font-weight: bold;line-height: 100px; } .file input {position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0; } .file:hover { }</style>

問題解答

在v-for的時候加上第二個參數，如把v-for='img in imgs'改成v-for='(img, index) in imgs'，這樣v-for循環里，index就是這個v-for遍歷的下標。

但是我看你的代碼，好像是把可以用v-for遍歷的相似結構全部展開了，這個是完全沒有必要的。把相似的列表項用v-for遍歷就可以了，如果全部展開的話，用Vue就沒有意義了。Vue的數據綁定本身就是為了處理動態更新以及數據和表現形式分離更加方便而做的。

一堆的getelementbyxxx

說明vue還沒入門，多看文檔及demo