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