前端应用开发实验:Vue的特性

目录

  • 实验目的
  • 实验内容
    • 图片浏览功能
      • 代码实现
      • 效果
    • 简单购物车功能
      • 代码实现
      • 效果
    • 汇率换算功能
      • 代码实现
      • 效果

关于需要准备的内容,如Vue的下载就不多赘述了

实验目的

(1)掌握vue实例编写的语法和基本选项的使用

(2)在实际情境中灵活运用计算属性和监听属性

(3)理解vue的数据绑定相关指令,且在实际中灵活运用

实验内容

图片浏览功能

1.图片浏览功能实现:点击上下翻页按钮,实现图片浏览。
在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片浏览器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #app {
            text-align: center;
        }
        button {
            padding: 10px 20px;
            margin: 10px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        img {
            max-width: 100%;
            height: auto;
            margin: 20px 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="app">
        <button v-on:click="left">上一张</button>
        <img :src="imgUrl[index]">
        <button v-on:click="right">下一张</button>
        <br>
        <button v-on:click="goods">购物车</button>
        <button v-on:click="money">美元换算</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                index:0,
                imgUrl:[
                    "image1.jpg",//这里填写自己的存放的图片,不过用网络图片的url也可以
                    "https://th.bing.com/th/id/OIP.LHrQijaTBDxVvYZH1d_pYQHaEB?w=322&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",//这里是网络上的一张图片的url
                    "pic3.jpg",
                ]
            },
            methods: {
                left:function(){
                    if(this.index > 0) {
                        this.index--;
                    }
                },
                right:function(){
                    if(this.index < this.imgUrl.length - 1) {
                        this.index++;
                    }
                },
                money:function(){
                    const nextPageUrl = 'http://localhost:5176/money'; // 替换为您想要跳转的网址
                    window.location.href = nextPageUrl;
                },
                goods:function(){
                    const nextPageUrl = 'http://localhost:5176/shopping'; // 替换为您想要跳转的网址
                    window.location.href = nextPageUrl;
                }
            },
        })
    </script>
</body>
</html>

效果

在这里插入图片描述
点击下一张就可以切换到另一张图片

简单购物车功能

2.简单购物车功能实现:要求计算出每种商品的总价和所有商品合计价格(要求精确到小数点后一位)
在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单购物车</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <div class="panel panel-info">
    <div class="panel-heading">
      <h3 class="panel-title">宝珠兑换</h3>
    </div>
    <div class="panel-body">
      <div class="checkbox">
        <label>
          <input type="checkbox" v-model="checkAll">
          全选
        </label>
      </div>
      <ul class="list-group">
        <li class="list-group-item" v-for="(item, index) in list" :key="item.id">
          <div class="checkbox">
            <label>
              <input type="checkbox" v-model="item.checked">
              {{ item.name }}--{{ item.price }}*{{ item.quantity }}
              <button type="button" @click="item.quantity>1?item.quantity-=1:1"
                class="btn btn-success">-</button>
              <button type="button" @click="item.quantity+=1" class="btn btn-success">+</button>
            </label>
          </div>
        </li>
      </ul>
      <p>总价:{{ sumPrice }}</p>
    </div>
  </div>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    list: [
      {
        id: 1,
        name: "界徐盛",
        price: 20,
        checked: false,
        quantity: 1
      },
      {
        id: 2,
        name: "神郭嘉",
        price: 101,
        checked: false,
        quantity: 1
      },
      {
        id: 3,
        name: "神甘宁",
        price: 70,
        checked: false,
        quantity: 1
      },
      {
        id: 4,
        name: "文鸯",
        price: 50,
        checked: false,
        quantity: 1
      }
    ]
  },
  computed: {
    checkAll: {
      set(v) {
        this.list.forEach(item => item.checked = v);
      },
      get() {
        return this.list.length === this.list.filter(item => item.checked).length;
      }
    },
    sumPrice() {
      return this.list.filter(item => item.checked).reduce((pre, cur) => {
        return pre + cur.price * cur.quantity;
      }, 0);
    }
  },
  methods: {
    save() {
      console.log(this.list.filter(item => item.checked));
    }
  }
});
</script>
</body>
</html>

效果

在这里插入图片描述
在这里插入图片描述

汇率换算功能

3.汇率换算功能实现:要求实现人民币和美元的兑换。
在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>汇率换算器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <h2>汇率换算器</h2>
  <div>
    <label for="rmb">人民币 (CNY):</label>
    <input type="number" id="rmb" v-model.number="rmb">
  </div>
  <div>
    <label for="usd">美元 (USD):</label>
    <input type="number" id="usd" v-model.number="usd">
  </div>

<p>1美元等于{{ exchangeRate }}人民币</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    rmb: 0,
    usd: 0,
    youka:0,
    exchangeRate: 6.45 // 假设的汇率,需要从实时API获取
    
  },
  watch: {
    rmb(newVal) {
      this.usd = newVal / this.exchangeRate;
    },
    usd(newVal) {
      this.rmb = newVal * this.exchangeRate;
    }
  }
});
</script>
</body>
</html>

效果

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/465719.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深度学习pytorch——Broadcast自动扩展

介绍 在 PyTorch 中&#xff0c;Broadcast 是指自动扩展&#xff08;broadcasting&#xff09;运算的功能。它允许用户在不同形状的张量之间执行运算&#xff0c;而无需手动将它们的形状改变为相同的大小。当进行运算时&#xff0c;PyTorch 会自动调整张量的形状&#xff0c;使…

十八、软考-系统架构设计师笔记-真题解析-2022年真题

软考-系统架构设计师-2022年上午选择题真题 考试时间 8:30 ~ 11:00 150分钟 1.云计算服务体系结构如下图所示&#xff0c;图中①、②、③分别与SaaS、PaaS、IaaS相对应&#xff0c;图中①、②、③应为( )。 A.应用层、基础设施层、平台层 B.应用层、平台层、基础设施层 C.平…

尊嘟假嘟,只需HiFi测序即可获得T2T基因组?

探秘动植物物种进化及遗传多样性的第一步往往是进行基因组测序&#xff0c;基因组从头组装&#xff08;Genome De novo assembly&#xff09; 是指从测序数据中重建生物基因组序列的过程。组装一直是生物信息学中的核心问题。 然而&#xff0c;到2019年底完成图这个概念仍然只…

香港公司变更注册地址所需材料及流程全解析

香港公司变更注册地址&#xff1a;所需材料及流程全解析 各位老板好&#xff0c;我是经典世纪胡云帅&#xff0c;随着业务的拓展和发展&#xff0c;香港公司可能需要变更其注册地址。变更注册地址不仅关系到公司的日常运营&#xff0c;还与公司的法律地位和品牌形象息息相关。本…

Grok-1 开源:马斯克旗下xAI公司发布革命性AI模型,开启开源大模型新篇章|3140亿参数

自从埃隆马斯克&#xff08;Elon Musk&#xff09;上周&#xff08;3月11日&#xff09;在 X 平台上宣布 Grok 将于本周开源的消息后&#xff0c;无数目光便聚焦于此&#xff0c;期待之情溢于言表。继 Meta 旗下的 Llama 2 模型开源之后&#xff0c;开源大模型界便充满了对新技…

Linux查看硬件型号详细信息

1.查看CPU &#xff08;1&#xff09;使用cat /proc/cpuinfo或lscpu &#xff08;2&#xff09;使用dmidecode -i processor Dmidecode 这款软件允许你在 Linux 系统下获取有关硬件方面的信息。Dmidecode 遵循 SMBIOS/DMI 标准&#xff0c;其输出的信息包括 BIOS、系统、主板、…

【Unity】获取游戏对象或组件的常用方法

前言 在Unity开发过程中&#xff0c;我们经常需要获取组件&#xff0c;那么在Unity里如何获取组件呢&#xff1f; 一、获取游戏对象 1.GameObject.Find GameObject.Find 是通过物体的名称获取对象的 所以会遍历当前整个场景&#xff0c;效率较低 而且只能获取激活状态的物体…

Sentinel篇:线程隔离和熔断降级

书接上回&#xff1a;微服务&#xff1a;Sentinel篇 3. 隔离和降级 限流是一种预防措施&#xff0c;虽然限流可以尽量避免因高并发而引起的服务故障&#xff0c;但服务还会因为其它原因而故障。 而要将这些故障控制在一定范围&#xff0c;避免雪崩&#xff0c;就要靠线程隔离…

作品展示ETL

1、ETL 作业定义、作业导入、控件拖拽、执行、监控、稽核、告警、报告导出、定时设定 欧洲某国电信系统数据割接作业定义中文页面&#xff08;作业顶层&#xff0c;可切英文&#xff0c;按F1弹当前页面帮助&#xff09; 涉及文件拆分、文件到mysql、库到库、数据清洗、数据转…

青海200MW光伏项目 35kV开关站图像监控及安全警示系统

一、背景 随着我国新能源产业的快速发展&#xff0c;光伏发电作为清洁能源的重要组成部分&#xff0c;得到了国家政策的大力扶持。青海作为我国光伏资源丰富地区&#xff0c;吸引了众多光伏项目的投资建设。在此背景下&#xff0c;为提高光伏发电项目的运行效率和安全性能&…

数据安全与个人隐私:美国人的焦虑与变化

PrimiHub一款由密码学专家团队打造的开源隐私计算平台&#xff0c;专注于分享数据安全、密码学、联邦学习、同态加密等隐私计算领域的技术和内容。 在这个每一次点击、轻敲或按键都留下数字踪迹的时代&#xff0c;美国人对个人数据安全的焦虑与日俱增。他们感觉对数据的使用几乎…

R语言:microeco:一个用于微生物群落生态学数据挖掘的R包,第四:trans_beta class

trans_beta class&#xff1a;利用trans_beta类可以变换和绘制beta分集的距离矩阵。该类中涉及到beta多样性的分析主要包括排序、群距、聚类和方差分析。我们首先使用PCoA显示排序。 > dataset$cal_betadiv() The result is stored in object$beta_diversity ... > t1 &…

unittest初级了解

unitttest初级了解 单元测试框架测试流程 编写测试用例创建测试类测试用例测试用例执行 单元测试框架 unittest(python自带的)&#xff0c;pytest(第三方库) 测试流程 编写测试用例—收集测试用例—执行用例—生成测试结果 编写测试用例 创建测试类 类名称建议以Test开头&…

html系列:按钮被样式图片挡着了,无法点击怎么办

​ 背景 在开发中会遇到一些奇奇怪怪的需求&#xff0c;比如在按钮上要显示一个样式图片&#xff0c;同时还要能不影响按钮的点击使用&#xff1b;这时候&#xff0c;设置好了样式&#xff0c;按钮无法点击怎么办&#xff1f; 在查阅资料的时候找到了解决方案。 解决方案 …

WPF图表库LiveCharts的使用

这个LiveCharts非常考究版本&#xff0c;它有非常多个版本&#xff0c;.net6对应的是LiveChart2 我这里的wpf项目是.net6&#xff0c;所以安装的是这三个&#xff0c;搜索的时候要将按钮“包括愈发行版”打勾 git&#xff1a;https://github.com/beto-rodriguez/LiveCharts2?…

数学建模——蒙特卡洛法

目录 1.介绍2.可以做的题型3.实战3.1求pi的值3.2求定积分x^2 的值 参加了大大小小很多场比赛了&#xff0c;但是都是混子&#xff0c;但还是打算记录一下吧&#xff0c;系统认真过一遍。后续功力深厚&#xff0c;会拓展写的文章&#xff0c;目前是干货&#xff0c;一些背景啥的…

2024 年(第 12 届)“泰迪杯”数据挖掘挑战赛—— C 题:竞赛论文的辅助自动评阅完整思路与源代码分享

一、问题背景 近年来我国各领域各层次学科竞赛百花齐放&#xff0c;层出不穷&#xff0c;学生参与度也越来越高。随着参赛队伍的增 加&#xff0c;评阅论文的工作量急剧增加&#xff0c;这对评阅论文的人力要求也越来越大。因此引入机器辅助评阅成为竞赛主办方的现实需求。 在…

System Verilog的接口、程序块与断言解析

接口、程序块与断言 1 接口 1.1 使用接口简化连接 // 接口 interface arb_if(input bit clk);logic [1:0] grant,request;logic rst; endinterface// 使用了简单接口的仲裁器 module arb (arb_if arbif);...always(posedge arbif.clk or posedge arbif.rst)beginif(arbif.rs…

计算方法实验1:圆形镜面成像问题

Algorithm Description 设 T ( c o s θ , s i n θ ) T(cos\theta,sin\theta) T(cosθ,sinθ),则有 P T Q T ( P x − c o s θ ) 2 s i n 2 θ ( Q x − c o s θ ) 2 ( Q y − s i n θ ) 2 PTQT\sqrt{(P_x-cos\theta)^2sin^2\theta}\sqrt{(Q_x-cos\theta)^2(Q_y-sin…

苹果Apple Watch将有更多新手势,智能穿戴将被赋予Find My功能

根据美国商标和专利局&#xff08;USPTO&#xff09;公示的清单&#xff0c;苹果公司获得了一项 Apple Watch 相关技术专利&#xff0c;表明苹果公司正在探索更多的交互手势。 苹果在 watchOS 10.1 更新中&#xff0c;为 Apple Watch 引入了全新的“双指互点两下”手势&#…