用vue写一个外卖软件我的的页面

好的，我可以给您提供一个简单的外卖软件页面的Vue示例代码。下面是一个简单的示例页面，包括一个菜单列表和一个购物车列表：

<template>
  <div>
    <!-- 菜单列表 -->
    <div>
      <h2>菜单</h2>
      <ul>
        <li v-for="item in menu" :key="item.id">
          <h3>{{ item.name }}</h3>
          <p>{{ item.description }}</p>
          <p>{{ item.price }}</p>
          <button @click="addToCart(item)">加入购物车</button>
        </li>
      </ul>
    </div>

    <!-- 购物车列表 -->
    <div>
      <h2>购物车</h2>
      <ul>
        <li v-for="item in cart" :key="item.id">
          <h3>{{ item.name }}</h3>
          <p>{{ item.price }}</p>
          <button @click="removeFromCart(item)">从购物车中删除</button>
        </li>
      </ul>
      <p>总价：{{ totalPrice }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          id: 1,
          name: '宫保鸡丁',
          description: '传统川菜，鸡肉与花生米炒制而成',
          price: 20,
        },
        {
          id: 2,
          name: '麻婆豆腐',
          description: '传统川菜，豆腐与牛肉炒制而成',
          price: 18,
        },
        {
          id: 3,
          name: '水煮牛肉',
          description: '传统川菜，牛肉和蔬菜煮制而成',
          price: 28,
        },
      ],
      cart: [],
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.price, 0);
    },
  },
  methods: {
    addToCart(item) {
      this.cart.push(item);
    },
    removeFromCart(item) {
      this.cart.splice(this.cart.indexOf(item), 1);
    },
  },
};
</script>

这段代码定义了一个Vue组件，其中包含一个菜单列表和一个购物车列表。菜单列表显示了一些菜品，每个菜品都有一个名称、描述和价格，以及一个“加入购物车”按钮。购物车列表显示了当前已经添加到购物车中的菜品，以及每个菜品的名称、价格和一个“从购物车中删除”按钮。在组件的计算属性中，计算了购物车中所有菜品的总价。在组件的方法中，实现了将菜品添加到购物车和从购物车中删除菜品的功能。