javascript - vue event gets subscript

Question

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>

Answer 1

Add the second parameter when v-for, for example, change v-for="img in imgs" to v-for="(img, index) in imgs", like thisv In the -for loop, index is the subscript traversed by this v-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 use v-for to 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.

Answer 2

A bunch of getelementbyxxx

It means you haven’t started with Vue yet, please read more about the documentation and demo