编写html脚本，创建Vue实例，在实例中显示个人信息及成绩信息，并进行简单的交互。具体功能要求如下。 1.初始显示本人的基本信息及所有课程的成绩信息，通过data属性设置，具体信息内容如下。（1）基本信息：姓名、学号、性别、出生日期、籍贯等，可以根据情况增加本人相关的其他信息。（2）上学期的所有课程的成绩信息，包括：课程编码、课程名称、课程性质、学分、成绩等。（3）所有个人信息及成绩信息必须真实。 2.每门课程的成绩添加两个按钮“加分”、“减分”,点击之后相应该课程的成绩随机增加或减少1至10分，通过元素事件绑定实例中的methods方法实现。 3.每门课程计算其绩点和学分绩点，通过methods方法实现。 4.添加相关computed属性，计算所有课程的总分、平均分。 5.监听“加分”或“减分”的次数，若次数超过2至4之间的一个随机数，则每一门课程的成绩减去10分，且“加分”、“减分”点击时，分数不再变化。 6.页面选用恰当元素，页面布局合理美观。

时间: 2023-06-17 11:03:47 浏览: 93

vue与iframe之间的信息交互的实现

Vue.js 是一款流行的前端框架，用于构建用户界面。在某些应用场景中，比如集成第三方服务或者在单页应用中嵌入其他网页，我们可能需要在 Vue 应用与 iframe（内联框架）之间进行信息交互。本文将深入探讨如何在 Vue 项目中实现这种交互。 `iframe` 是一种 HTML 元素，它允许我们在一个页面中嵌入另一个页面。在 Vue 中，我们可能需要使用 iframe 来加载离线地图或其他第三方组件，如百度地图。如果要在 Vue 组件和 iframe 内容之间传递数据，我们需要利用浏览器提供的 `postMessage` API。 `postMessage` 是一个窗口对象（如 `window`）的方法，它允许跨窗口通信。在 Vue 中，我们可以获取到 iframe 的 `contentWindow` 对象，然后通过这个对象调用 `postMessage` 方法来发送信息。例如： ```html <iframe ref="iframe" src="https://example.com"></iframe> ``` 在 Vue 的实例中，我们可以通过 `this.$refs.iframe.contentWindow` 获取到 iframe 的 window 对象，然后发送信息： ```javascript this.$refs.iframe.contentWindow.postMessage({ cmd: '地图操作', params: { action: 'zoomIn' } }, 'https://example.com'); ``` 在上面的代码中，`cmd` 和 `params` 是自定义的数据结构，用于标识消息的类型和携带的数据。`postMessage` 的第二个参数是目标源（target origin），确保只有指定源的 iframe 才能接收到消息。在 iframe 内部，我们需要监听 `window` 对象的 `message` 事件来接收来自父页面的消息。这是一个典型的事件监听器设置： ```javascript window.addEventListener('message', (event) => { if (event.origin !== 'http://parent-page-origin') return; // 检查消息来源 const data = event.data; switch (data.cmd) { case '地图操作': if (data.params.action === 'zoomIn') { // 执行地图缩放操作 } break; // 其他命令处理... } }); ``` 通过这种方式，Vue 组件可以向 iframe 发送指令，iframe 内部的脚本则根据接收到的命令执行相应操作。需要注意的是，由于 `postMessage` 是异步的，发送方无法直接获取到接收方的响应。因此，通常需要通过在 iframe 内部再次使用 `postMessage` 回复给父页面来实现双向通信。总结一下，Vue 与 iframe 之间的信息交互主要包括以下步骤： 1. 在 Vue 中，通过 `this.$refs.iframe.contentWindow` 获取 iframe 的 window 对象。 2. 使用 `postMessage` 向 iframe 发送消息，包含自定义的数据结构和目标源。 3. 在 iframe 内部，监听 `message` 事件来接收并处理来自父页面的消息。 4. 使用 iframe 的 `window` 对象的 `postMessage` 回复给父页面，实现双向通信。了解这些原理后，你可以根据实际需求调整通信机制，实现更复杂的功能，比如在 Vue 应用中嵌入第三方地图服务，控制地图的行为等。在实际开发过程中，为了保证安全性，记得检查消息的来源，防止跨域攻击。希望这篇文章对你在 Vue 与 iframe 信息交互上的理解和实践有所帮助。

下面是一个简单的实现，仅供参考： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>个人信息及成绩信息</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>个人信息</h1> <p>姓名：{{ name }}</p> <p>学号：{{ studentId }}</p> <p>性别：{{ gender }}</p> <p>出生日期：{{ birth }}</p> <p>籍贯：{{ hometown }}</p> <h1>成绩信息</h1> <table> <thead> <tr> <th>课程编码</th> <th>课程名称</th> <th>课程性质</th> <th>学分</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(course, index) in courses" :key="index"> <td>{{ course.code }}</td> <td>{{ course.name }}</td> <td>{{ course.property }}</td> <td>{{ course.credit }}</td> <td>{{ course.score }}</td> <td> <button @click="addScore(index)">加分</button> <button @click="subScore(index)">减分</button> </td> </tr> <tr> <td colspan="4">总分：</td> <td>{{ totalScore }}</td> <td></td> </tr> <tr> <td colspan="4">平均分：</td> <td>{{ avgScore }}</td> <td></td> </tr> </tbody> </table> </div> <script> var app = new Vue({ el: '#app', data: { name: '张三', studentId: '20180001', gender: '男', birth: '1999-01-01', hometown: '北京', courses: [ { code: '001', name: '高等数学', property: '必修', credit: 4, score: 90, addCount: 0, subCount: 0 }, { code: '002', name: '大学英语', property: '必修', credit: 2, score: 85, addCount: 0, subCount: 0 }, { code: '003', name: '计算机组成原理', property: '选修', credit: 3, score: 92, addCount: 0, subCount: 0 } ] }, computed: { totalScore: function() { var sum = 0; for (var i = 0; i < this.courses.length; i++) { sum += this.courses[i].score; } return sum; }, avgScore: function() { return (this.totalScore / this.courses.length).toFixed(2); } }, methods: { addScore: function(index) { if (this.courses[index].addCount >= 2 && this.courses[index].addCount <= 4) { this.courses[index].addCount = -1; // 表示不能再加分了 for (var i = 0; i < this.courses.length; i++) { this.courses[i].score -= 10; } } else if (this.courses[index].addCount >= 0) { this.courses[index].score += Math.floor(Math.random() * 10) + 1; this.courses[index].addCount++; } }, subScore: function(index) { if (this.courses[index].subCount >= 2 && this.courses[index].subCount <= 4) { this.courses[index].subCount = -1; // 表示不能再减分了 for (var i = 0; i < this.courses.length; i++) { this.courses[i].score -= 10; } } else if (this.courses[index].subCount >= 0) { this.courses[index].score -= Math.floor(Math.random() * 10) + 1; this.courses[index].subCount++; } } } }); </script> </body> </html> ``` 在这个实现中，我们使用了 Vue.js 来创建一个实例，并通过 data 属性设置了个人信息和课程成绩信息。在页面中，我们使用了表格来展示课程成绩信息，并为每个课程添加了“加分”和“减分”两个按钮，通过事件绑定实现了相应的方法。我们还使用了 computed 属性来计算总分和平均分，并使用了 v-for 指令来遍历课程成绩信息。最后，我们使用了 v-if 指令和条件语句来实现“加分”和“减分”次数的限制。

阅读全文

相关推荐

vue.js过滤器+ajax实现事件监听及后台php数据交互实例

vue.js与后台数据交互的实例讲解

在 ASP.NET Core Web 项目中利用 Vue.js 的强大功能，构建交互式的前端用户界面

drawio在vue中的使用

swiper与vue数据交互

vue.js有哪些必要组件需要编写，分别对应的编写格式规范

unity3d(2021版)打包成webgl和前端vue交互

vue中的api与组件的关系

如何通过Vue.js创建一个完整的待办事项记事本应用？请提供详细的开发步骤。

在使用SpringBoot开发社区老龄化服务管理平台时，如何整合Vue前端和MySQL数据库，并确保JDK1.8的兼容性？请提供一个基本的整合步骤。

如何实现vue前端页面打开服务器终端并可以操作命令行

vue laravel

用spring boot+vue写一个自习室预约管理系统，具体需要创建些什么包，每一个包下面又要写哪些代码，每个包中的每段代码又是为了实现什么，请详细描述一下

完成一个小作品，必须至少展示三项Vue技术的运用。 三项Vue技术说明： 技术1：Vue数据绑定 技术2：Vue组件 技术3：Vue路由

diypage vue

vue case写法

html，js，vue，点击提交按钮，如果没有输入完全会弹出提示框，如果密码长度不够也会弹出提示框，点击重置按钮会清空数据

vue应用程序开发复习资料

echarts和vue

最新推荐

div当滚动到页面顶部的时候固定在顶部实例代码

使用Vue开发动态刷新Echarts组件的教程详解

vue从零实现一个消息通知组件的方法详解

浅谈Visual Studio 2019 Vue项目的目录结构

aiohttp-3.7.3-cp36-cp36m-win_amd64.whl.rar

探索AVL树算法：以Faculdade Senac Porto Alegre实践为例

管理建模和仿真的文件

【ggplot2绘图技巧】：R语言中的数据可视化艺术

HAL库怎样将ADC两个通道的电压结果输出到OLED上？

小学语文教学新工具：创新黑板设计解析

完成一个小作品，必须至少展示三项Vue技术的运用。三项Vue技术说明：技术1：Vue数据绑定技术2：Vue组件技术3：Vue路由