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

news2024/9/20 1:22:03

实验目的

（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>