<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <style type="text/css">
        div>div{
            width: 128px;
            height: 128px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>鼠标位于({{x}},{{y}})</p>
        <p>背景色{{backgroundColor}}</p>
        <div v-on:mousemove="mousemove" v-bind:style="{backgroundColor}"></div>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                x:0,
                y:0,
            },
            methods:{
                mousemove:function (event) {
                    this.x = event.offsetX;
                    this.y = event.offsetY;
                }
            },
            computed:{
                backgroundColor(){
                    const c = (this.x + this.y).toString(16);
                    return c.length == 2 ? `#${c}${c}${c}`:`#0${c}0${c}0${c}`;
                }
            }
        });
    </script>
</body>
</html>