javascript - Grande question d'aide !!!!! Pourquoi cette sortie est-elle différente?
欧阳克
欧阳克 2017-07-05 10:51:56
0
1
814

Comme le montre l'image, pourquoi les propriétés de sortie sont-elles différentes ? ? ? ? ?

<template>
        <p class="table-p">
            <span @click='change_router'>点我跳转</span><br>
            <ul class="table">
                <li v-for='item in data'>                
                    <p 
                    :class="item.moveYse?'zindex':''"
                    class="content" 
                    @click='start0(item,$event)'
                    @mousedown='moveDown(item,$event)'
                    @mousemove='move0(item,$event)'
                    @mouseup='moveUp(item,$event)'
                    :style="'top:'+item.top+'px;left:'+item.left+'px'">
                        {{item.a}}
                    </p>
                </li>
            </ul>
        </p>
</template>
<script>
export default{
    data(){
        return{
            data: [
                {a:'列表1',top:0,left:0,startX:0,startY:0,moveYse:false},
                {a:'列表2',top:0,left:0,startX:0,startY:0,moveYse:false},
                {a:'列表3',top:0,left:0,startX:0,startY:0,moveYse:false},
                {a:'列表4',top:0,left:0,startX:0,startY:0,moveYse:false},
            ],
        }
    },
    created(){
        var that =this
        setInterval(function () {
          that.msg += 1
        }, 1000)
    },
    watch: {
        
    },
    methods: {        
        change_router() {
            this.$router.push({name:'index'})
        },
        start0(item,e) {
            item.moveYse = true
            // console.log(item,e,'click')
        },
        moveDown(item,e) {
            item.moveYse = true
            console.log(item,e,'down')
            item.startX = e.clientX
            item.startY = e.clientY
        },
        move0(item,e) {
            if (item.moveYse == true) {
                console.log(item,e,item.moveYse,'move')
                item.top = e.clientY - item.startY
                item.left = e.clientX - item.startX 
            }
        },
        moveUp(item,e) {
            item.moveYse = false
            let l = e.clientY - item.startY
            if (l < 50) {
                console.log(l)
                item.startY = 0
                item.startX = 0
                item.top = 0
                item.left = 0
            }else {

            }
            console.log(item.moveYse,item,item.moveYse,'up')
        }
    }
}    
</script>
欧阳克
欧阳克

温故而知新,可以为师矣。 博客:www.ouyangke.com

répondre à tous(1)
某草草
 moveDown(item,e) {
    item.moveYse = true
    console.log(item,e,'down')
    item.startX = e.clientX
    item.startY = e.clientY
},
moveUp(item,e) {
    item.moveYse = false
    let l = e.clientY - item.startY
    if (l < 50) {
        console.log(l)
        item.startY = 0
        item.startX = 0
        item.top = 0
        item.left = 0
    }else {

    }
    console.log(item.moveYse,item,item.moveYse,'up')
}

Lorsque vous imprimezconsole.log(item.moveYse,item,item.moveYse,'up'), c'est en fait faux, mais lorsque vous cliquez sur l'objet élément dans la console pour l'afficher, car la méthode moveDown est exécutée, item.mouseYse redevient vrai.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!