When I trigger one of them, I want to know how to get his subscript
<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 id="myMission" class="mui-icon mui-icon-arrowright" @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 style="width: 100%; height: 100%; position: absolute;top:0;left:0;z-index: 9;" :src="image" />
<a href="javascript:void(0);" style="position: absolute;top: -30px; right: 0;z-index: 10;color: red;" >
<span class="mui-icon mui-icon-close" @click='delImage($index)'></span>
</a>
</li>
</ul>
</p>
<p>
<p v-if="!image">
<input type="file" @change="onFileChange">
</p>
<p v-else>
<img :src="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 style="width: 100%; height: 100%; position: absolute;top:0;left:0;z-index: 9;" :src="image" />
<a href="javascript:void(0);" style="position: absolute;top: -30px; right: 0;z-index: 10;color: red;" >
<span class="mui-icon mui-icon-close" @click='delImage($index)'></span>
</a>
</li>
</ul>
</p>
<p>
<p v-if="!image">
<input type="file" @change="onFileChange">
</p>
<p v-else>
<img :src="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 id="missionHistorical" class="mui-icon mui-icon-arrowright" @click="missionHistorical"></span>
</p>
<p class="mission_historical_list">
<ul>
<li>
<span class="mission_img">
<img src="../../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 id="box" @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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Add the second parameter when
v-for, for example, changev-for="img in imgs"tov-for="(img, index) in imgs", like thisv In the -forloop, index is the subscript traversed by thisv-for.But when I look at your code, it seems that you expand all similar structures that can be traversed using
v-for. This is completely unnecessary. Just usev-forto traverse similar list items. If they are all expanded, there is no point in using Vue. Vue's data binding itself is made to make it easier to handle dynamic updates and separate data and presentation.A bunch of getelementbyxxx
It means you haven’t started with Vue yet, please read more about the documentation and demo