vue编写简单的管理系统界面UI代码

下面是一个简单的管理系统界面的 Vue.js UI 代码：

<template>
  <div class="container">
    <h1>管理系统</h1>
    <div class="row">
      <div class="col-md-3">
        <ul class="nav nav-pills nav-stacked">
          <li :class="{active: activeTab === 'dashboard'}" @click="activeTab = 'dashboard'"><a href="#">仪表盘</a></li>
          <li :class="{active: activeTab === 'products'}" @click="activeTab = 'products'"><a href="#">产品</a></li>
          <li :class="{active: activeTab === 'orders'}" @click="activeTab = 'orders'"><a href="#">订单</a></li>
          <li :class="{active: activeTab === 'customers'}" @click="activeTab = 'customers'"><a href="#">客户</a></li>
        </ul>
      </div>
      <div class="col-md-9">
        <div v-if="activeTab === 'dashboard'">
          <h2>仪表盘</h2>
          <p>欢迎来到管理系统。</p>
        </div>
        <div v-if="activeTab === 'products'">
          <h2>产品</h2>
          <table class="table">
            <thead>
              <tr>
                <th>名称</th>
                <th>价格</th>
                <th>库存</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="product in products">
                <td>{{ product.name }}</td>
                <td>{{ product.price }}</td>
                <td>{{ product.quantity }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-if="activeTab === 'orders'">
          <h2>订单</h2>
          <table class="table">
            <thead>
              <tr>
                <th>订单号</th>
                <th>客户</th>
                <th>订单日期</th>
                <th>总金额</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="order in orders">
                <td>{{ order.id }}</td>
                <td>{{ order.customer }}</td>
                <td>{{ order.date }}</td>
                <td>{{ order.total }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-if="activeTab === 'customers'">
          <h2>客户</h2>
          <ul>
            <li v-for="customer in customers">{{ customer.name }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'dashboard',
      products: [
        { name: '产品1', price: 100, quantity: 10 },
        { name: '产品2', price: 200, quantity: 20 },
        { name: '产品3', price: 300, quantity: 30 }
      ],
      orders: [
        { id: 1, customer: '客户1', date: '2021-01-01', total: 1000 },
        { id: 2, customer: '客户2', date: '2021-02-01', total: 2000 },
        { id: 3, customer: '客户3', date: '2021-03-01', total: 3000 }
      ],
      customers: [
        { name: '客户1' },
        { name: '客户2' },
        { name: '客户3' }
      ]
    };
  }
};
</script>

<style>
.container {
  margin-top: 50px;
}

.nav-pills {
  margin-bottom: 20px;
}
</style>

这个代码实现了一个简单的管理系统界面，包括一个侧边栏导航和一个主窗口，可以通过点击侧边栏导航来切换主窗口中显示的内容。主窗口中包含了不同的数据表格，可以通过 `v-for` 指令来循环渲染数据。