問題描述

如圖，為啥這輸出的屬性不一樣？？？？？

<template><p class='table-p'> <span @click=’change_router’>點我跳轉</span><br> <ul class='table'><li v-for=’item in data’> <p : @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 =thissetInterval(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.startYitem.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 = 0item.startX = 0item.top = 0item.left = 0 }else { } console.log(item.moveYse,item,item.moveYse,’up’)} }} </script>

問題解答

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 = 0item.startX = 0item.top = 0item.left = 0 }else { } console.log(item.moveYse,item,item.moveYse,’up’)}

在你打印的時候console.log(item.moveYse,item,item.moveYse,’up’)的時候，實際上是false,但是在你在控制臺里去點開item對象看的時候，由于執行了moveDown方法，就把item.mouseYse又改回了true.