<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app" :class="{‘box‘:isActive}" @touchstart="slideStart" @touchend="slideEnd"> {{ message }} </div> <script> var app = new Vue({ el: ‘#app‘, data: { message: ‘Hello Vue!‘, isActive: true }, methods: { slideStart: function (e) { this.startX = e.changedTouches[0].pageX; this.startY = e.changedTouches[0].pageY; }, slideEnd: function (e) { this.endX = e.changedTouches[0].pageX; this.endY = e.changedTouches[0].pageY; this.moveX = this.endX-this.startX; this.moveY = this.endY-this.startY; if (this.moveX > 50) { console.log(‘右‘); } else if (this.moveX < -50) { console.log(‘左‘); }else if (this.moveY > 100) { console.log(‘下‘); }else if (this.moveY < -100) { console.log(‘上‘); } console.log(‘X:‘,this.moveX); console.log(‘Y:‘,this.moveY); } } }) </script> <style> .box { width: 800px; height: 400px; background-color: gray; } </style> </body> </html>