1.数据铺设
1. 下载bootstrap:yarn add bootstrap
2.在main.js引入bootstrap:import "bootstrap/dist/css/bootstrap.css"
3.html+css
4.list数据铺设表格
<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 }}</td> <td><a href="#">删除</a></td> </tr> </tbody>
export default { data() { return { name: "", // 名称 price: 0, // 价格 list: [ { id: 100, name: "外套", price: 199, time: new Date("2010-08-12") }, { id: 101, name: "裤子", price: 34, time: new Date("2013-09-01") }, { id: 102, name: "鞋", price: 25.4, time: new Date("2018-11-22") }, { id: 103, name: "头发", price: 19900, time: new Date("2020-12-12") }, ], }; }, }; </script> <style > .red { color: red; } </style>
2.表单数据新增
1.为添加资产按钮绑定点击事件
<!-- 阻止表单提交 --> <button class="btn btn-primary" @click.prevent="addFn">添加资产</button>
因为点击按钮表单会自动提交刷新页面所以需要添加修饰符.prevent阻止表单提交
2.给表单v-model绑定vue变量收集用户输入内容
<div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="资产名称" v-model="name" /> </div> </div> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="价格" v-model.number="price" /> </div> </div>
3.添加数据到数组中
methods: { addFn() { // 3.添加数据到数组中 this.list.push({ // 当前数组最后一个对象的id+1作为新对象id值 id: this.list[this.list.length - 1].id + 1, name: this.name, price: this.price, time: new Date(), }); }, },
4.判断用户内容是否符合规定
methods: { addFn() { //判断是否为空 if (this.name.trim().length === 0 || this.price === 0) { alert("不能为空"); return; } .... }, },
3.表单数据删除
1.a标签绑定点击事件,给事件方法传id
<td><a href="#" @click="delFn(obj.id)">删除</a></td>
因为通过v-for循环数组方式渲染的表单,需要传入obj.id值来区分每个点击事件
2.通过id找到对应数据删除
delFn(id) { //通过id找这条数据在数组中的下标 let index = this.list.findIndex((obj) => obj.id === id); this.list.splice(index, 1); },
3.删除光了以后要让tfoot显示
<tfoot v-show="list.length === 0"> <tr> <td colspan="5" style="text-align: center">暂无数据</td> </tr> </tfoot>
4.全部删除后再新增,需要修复问题
解决bug当无数据新增时候-list没有数据 id需要给固定值
//解决bug当无数据新增时候-list没有数据 id需要给固定值 let id = this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 100; // 3.添加数据到数组中 this.list.push({ // 当前数组最后一个对象的id+1作为新对象id值 id: id, name: this.name, price: this.price, time: new Date(), }); },
4.添加时间过滤器
1.下载moment包:yarn add moment
2.导入包:import moment from 'moment'
3.过滤器定义和使用:
filters: { timer(val) { return moment(val).format("YYYY-MM-DD"); }, },
<td>{{ obj.time | timer }}</td>
5.总价和均价
1.tbody最后新增一行,用来存放总价和均价,并把计算属性用到相应的标签处
<tr style="background-color: #eee"> <td>统计:</td> <td colspan="2">总价钱为:{{ allPrice }}</td> <td colspan="2">平均价:{{ svgPrice }}</td> </tr>
2.定义总价和均价的2个计算属性,在函数里面编写计算过程返回结果
//计算属性 computed: { allPrice() { return this.list.reduce((sum, obj) => (sum += obj.price), 0); }, svgPrice() { return this.allPrice / this.list.length; }, },
6.数据缓存
监听list变化,同步到浏览器本地
把品牌管理的数据实时同步到本地缓存
1.在watch侦听list变化时,把最新的数组list转为JSON字符串存入到localStorage本地
watch: { list: { immediate: true, deep: true, handler(newVal, oldVal) { //存入本地 localStorage.setItem("plist", JSON.stringify(this.list)); }, }, },
2.data里默认把list变量从本地取值,如果取不到给个默认空数组
data() { return { name: "", // 名称 price: 0, // 价格 //本地取出缓存的list list: JSON.parse(localStorage.getItem("plist")) || [], }; },
3.如果数据都删除则统计不显示
<!-- 统计得有数据才显示 --> <tfoot v-if="list.length !== 0"> <tr> <td colspan="5" style="text-align: center">暂无数据</td> </tr> </tfoot>