每日一题：魔法失灵了

介绍

oh ~ 糟糕 😰 ，dr.小蓝正在研究一项伟大的发明，实验进行中控制重要的元素 Magic 的按钮突然失灵了，快来用你的魔法帮助 dr.小蓝吧。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
4
├── css
│   └── style.css
├── index.html
└── js

其中：

  • index.html 是待修复的主页面。
  • css 是存放项目样式的文件夹。
  • js 是项目所依赖的 vue 文件。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
2
wget https://labfile.oss.aliyuncs.com/courses/20964/magic.zip
unzip magic.zip && rm -f magic.zip

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，在浏览器中预览 index.html 点击页面上的 - 与 + 按钮无法改变中间的数值，页面效果如下：

图片描述

目标

找到 index.html 中 TODO 部分，正确修复代码使 data 对象恢复响应式特性，即点击页面上的 - 与 + 按钮可以改变 value 的值。正确实现后效果如下：

图片描述

规定

  • 请按照给出的步骤操作，切勿修改默认提供的文件名称、文件夹路径等。
  • 满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 597 | 总提交次数: 628 | 通过率: 95.1%

难度: 中等 标签: 2023, 模拟赛, Web 前端, Vue.js

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    const { reactive,toRefs, createApp } = Vue;

    const data = reactive({
        value:100
    });
    //TODO：待修复代码
    let { value }={ ...toRefs(data) }

    function update(val) {
        data.value.value = val
    }
    const app = createApp({
      setup() {
        return {
            value,
            update
        };
      }
    });
    app.mount('#app');
  </script>