前端应用开发实验：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>