javascript - vue事件获取下标

Question

当我触发其中一个的时候，想知道怎么获取他的下标

<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>

Answer 1

在v-for的时候加上第二个参数，如把v-for="img in imgs"改成v-for="(img, index) in imgs"，这样v-for循环里，index就是这个v-for遍历的下标。

但是我看你的代码，好像是把可以用v-for遍历的相似结构全部展开了，这个是完全没有必要的。把相似的列表项用v-for遍历就可以了，如果全部展开的话，用Vue就没有意义了。Vue的数据绑定本身就是为了处理动态更新以及数据和表现形式分离更加方便而做的。

Answer 2

一堆的getelementbyxxx

说明vue还没入门，多看文档及demo