vue做一个品牌管理页面的代码

vue做一个品牌管理页面的代码

包含增删改查

<div class="container">
  <!-- 顶部框模块 -->
  <div class="form-group">
    <div class="input-group">
      <h4>品牌管理</h4>
    </div>
  </div>

  <!-- 数据表格 -->
  <table class="table table-bordered table-hover mt-2">
    <thead>
      <tr>
        <th>编号</th>
        <th>资产名称</th>
        <th>价格</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
    </thead>
  
    <tbody>
      <tr v-for="obj in list" :key="obj.id">
          <td>{{ obj.id }}</td>
          <td>{{ obj.name }}</td>
          <!-- 如果价格超过100，就有red这个类 -->
          <td :class="{red: obj.price > 100}">{{ obj.price }}</td>
          <td>{{ obj.time | formatDate }}</td>
          <td><a href="#" @click="delFn(obj.id)">删除</a></td>
      </tr>
      <tr style="background-color: #EEE">
          <td>统计:</td>
          <td colspan="2">总价钱为: {{ allPrice }}</td>
          <td colspan="2">平均价: {{ avgPrice }}</td>
      </tr>
    </tbody>     
  </table>

  <!-- 添加资产 -->
  <form class="form-inline">
    <div class="form-group">
      <div class="input-group">
        <input
          type="text"
          class="form-control"
          placeholder="资产名称"
          v-model="name"
        />
      </div>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <div class="form-group">
      <div class="input-group">
        <input
          type="text"
          class="form-control"
          placeholder="价格"
          v-model.number="price"
        />
      </div>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <!-- 4. 阻止表单提交(刷新网页数据又回去了) -->
    <button class="btn btn-primary" @click.prevent="addFn">添加资产</button>
  </form>
</div>