使用Vue编写一个html页面，实现监听键盘事件并根据按键改变页面背景颜色。

YCY866

已于 2024-03-17 22:29:31 修改

阅读量387

点赞数 11

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-03-17 22:29:00 首次发布

本文链接：https://blog.csdn.net/2301_76478257/article/details/136791975

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

创建一个Vue实例，使用Vue监听键盘事件并根据按键改变页面背景颜色，并在该实例中设置一个数据属性来控制背景颜色。然后，你可以使用@keydown事件监听器来捕获按键事件，并在事件处理函数中根据按下的键来更新背景颜色。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>根据键盘按键事件实现背景颜色更换</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
  }
</style>
</head>
<body>
<div id="app">
  <h1>按下a，s，d，f，j，k，l按键更换背景颜色</h1>
  <p>其它按键重置背景颜色为: {{ currentColor }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      currentColor: 'white', // 默认背景颜色
      colorKeys: {
        'a': 'lightblue',
        's': 'lightgreen',
        'd': 'lightcoral',
        'f': 'lightgray',
        'j': 'lightpink',
        'k': 'lightyellow',
        'l': 'lightskyblue',
        'semicolon': 'violet',
        'quote': 'orange'
      }
    },
    methods: {
      changeBackgroundColor(event) {
        const key = event.key;
        if (this.colorKeys.hasOwnProperty(key)) {
          thiscurrentColor = this.colorKeys[key];
          document.body.style.backgroundColor = thiscurrentColor;
        } else {
          thiscurrentColor = 'white'; // 如果按下的键不在我们的colorKeys中，重置背景颜色
          document.body.style.backgroundColor = thiscurrentColor;
        }
      }
    },
    mounted() {
      window.addEventListener('keydown', this.changeBackgroundColor);
    },
    beforeDestroy() {
      window.removeEventListener('keydown', this.changeBackgroundColor);
    }
  });
</script>
</body>
</html>

在这个示例中：

我们定义了一个名为currentColor的数据属性来存储当前的背景颜色。
colorKeys对象包含了一组按键和对应的背景颜色。
changeBackgroundColor方法用于处理按键事件，它会检查按下的键是否在colorKeys对象中，并更新currentColor属性以及实际的背景颜色。
在mounted生命周期钩子中，我们添加了一个全局的keydown事件监听器。
在beforeDestroy生命周期钩子中，我们移除了这个事件监听器，以防止内存泄漏。

现在，当你在页面上按下指定的键时，页面的背景颜色会根据colorKeys对象中定义的规则改变。如果按下的键不在colorKeys中，则背景颜色会重置为白色。