javascript - acara vue mendapat subskrip

Question

Apabila saya mencetuskan salah satu daripadanya, saya ingin tahu bagaimana untuk mendapatkan langganannya

<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

Subskrip v-for的时候加上第二个参数，如把v-for="img in imgs"改成v-for="(img, index) in imgs"，这样v-for循环里，index就是这个v-for traversal.

Tetapi apabila saya melihat kod anda, nampaknya anda hanya boleh menggunakan v-for遍历的相似结构全部展开了，这个是完全没有必要的。把相似的列表项用v-for untuk melintasi Jika anda mengembangkan semuanya, tidak ada gunanya menggunakan Vue. Pengikatan data Vue itu sendiri dibuat untuk memudahkan pengendalian kemas kini dinamik dan data dan pembentangan berasingan.

Answer 2

Sekumpulan getelementbyxxx

Ini bermakna anda belum mula menggunakan Vue lagi, sila baca lebih lanjut tentang dokumentasi dan demo