Javascript – Große Frage um Hilfe!!!!! Warum ist diese Ausgabe anders?
Wie im Bild gezeigt, warum unterscheiden sich die Ausgabeeigenschaften? ? ? ? ? 
<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>
