样例效果:
目标: 数据铺设
- 需求1: 把默认数据显示到表格上
- 需求2: 注意资产超过100的, 都用红色字体标记出来
- 需求3: 实现表单数据新增进表格功能
- 需求4: 判断用户输入是否为空给提示
- 需求5: 点击删除的a标签, 删除数据
- 需求6: 删除没数据了要提示暂无数据
先引入vue.js,moment.js和bootstrap
.col{
color: red;
}
<div id="app">
<h2>品牌管理</h2>
<table class="table table-bordered">
<tr>
<th>编号</th>
<th>资产名称</th>
<th>价格</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tbody v-if="objArr.length>0">
<tr v-for="(item,index) in objArr">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td :class = "{
'col':item.price>100}">{
{item.price}}