为什么我可以在控制台中看到 x 和 y 偏移量，但在我的网页上却看不到？

Question

我正在尝试在我使用 div 预先确定的特定区域内显示我的鼠标坐标。当我查看 chrome 控制台而不是我的网页时，我能够看到坐标在 div 内移动时动态变化。

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Mouse Coordinates</title>
        <link rel="stylesheet" type="text/css" href="style.css">        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>
        <div id="vue-app">
   <div id="canvas" v-on:mousemove="XYcoordinates">
                {{x}},{{y}}
            <div>
        </div>


        <script src="app.js"></script>
    </body>
</html>

//App.js file
// this is a Vue instance
new Vue({
    el:'#vue-app',
    // data object
    data:{
     x:0,
     y:0
    },
    methods:{
        XYcoordinates: function(event){
            console.log(event);
            this.x = event.offsetX;
            this.y = event.offsetY;
        }
    }
});

#canvas{
    width:600px;
    padding: 200px 20px;
    text-align: center;
    border: 3px solid rgb(228, 0, 0);
}

Answer 1

问题又回到未关闭的div标签，可以看到linkhttps://jsfiddle.net/smaha/bajdmyhn/26/有效

 <div id="vue-app">
   <div id="canvas" v-on:mousemove="XYcoordinates">
            {{x}},{{y}}
   </div>
 </div>

为什么我可以在控制台中看到 x 和 y 偏移量，但在我的网页上却看不到？

Why am I able to see the x and y offset in the console but not on my webpage?

javascript

vue.js

google-chrome-console