Vue.js 按钮与值更新

介绍

在这个项目中，你将学习如何设置 Vue.js 环境，并实现按钮功能以更新网页上显示的值。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何设置 Vue.js 环境
• 如何实现“-”和“+”按钮的功能以更新值
• 如何测试按钮的功能

🏆 成果

完成这个项目后，你将能够：

• 设置一个基本的 Vue.js 应用程序
• 创建一个响应式数据对象并更新其值
• 使用事件处理程序调用函数并更新用户界面

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── css
│   └── style.css
├── index.html
└── js

其中：

• index.html 是要修复的主页。
• css 是存储项目样式的文件夹。
• js 是项目依赖的 Vue 文件。

点击 WebIDE 右下角的“Go Live”按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新，你将看到页面。点击页面上的“-”和“+”按钮，你会发现中间的值无法更改。页面效果如下：

修复功能

在这一步中，你需要修复漏洞，以便通过点击页面上的“-”和“+”按钮，中间的值会相应地改变。

1. 在 index.html 文件中，找到 // TODO 部分：
2. 将其修改为以下代码：

// TODO
let { value } = toRefs(data);

3. 在“-”和“+”按钮的 @click 事件处理程序中，调用 update 函数并将更新后的值作为参数传递。
4. 在 update 函数中，使用作为参数传递的新值更新 value 属性。

完成这些步骤后，点击页面上的“-”和“+”按钮，中间的值会相应地改变。

完成后的效果如下：

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。