网站开发经费申请报告,网站建设需要几步,废物利用手工制作图片,wordpress如何备份数据一、成绩案例
✅✅✅通过本次案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能。 准备成绩案例模板#xff0c;我们需要在这些模板上面进行功能操作。
templatediv classscore-casediv classtable…一、成绩案例
✅✅✅通过本次案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能。 准备成绩案例模板我们需要在这些模板上面进行功能操作。
templatediv classscore-casediv classtabletabletheadtrth编号/thth科目/thth成绩/thth考试时间/thth操作/th/tr/theadtbodytr v-for(item,i) in list :keyitem.idtd{{ i1 }}/tdtd{{ item.subject }}/tdtd classred{{ item.score }}/tdtd{{ item.date }}/tdtda href#删除/a/td/tr/tbody!-- tbody trtd colspan5span classnone暂无数据/span/td/tr/tbody --tfoottrtd colspan5span总分321/spanspan stylemargin-left:50px平均分80.25/span/td/tr/tfoot/table/divdiv classformdiv classform-itemdiv classlabel科目/divdiv classinputinput typetext placeholder请输入科目 //div/divdiv classform-itemdiv classlabel分数/divdiv classinputinput typetext placeholder请输入分数 //div/divdiv classform-itemdiv classlabel/divdiv classinputbutton classsubmit 添加/button/div/div/div/div
/templatescript
export default {name: ScoreCase,data () {return {list: [{id: 15, subject: 语文, score: 89, date: new Date(2022/06/07 10:00:00)},{id: 27, subject: 数学, score: 100, date: new Date(2022/06/07 15:00:00)},{id: 32, subject: 英语, score: 56, date: new Date(2022/06/08 10:00:00)},{id: 41, subject: 物理, score: 76, date: new Date(2022/06/08 10:00:00)}],subject: ,score: }}
};
/scriptstyle langless
.score-case {width: 1000px;margin: 50px auto;display: flex;.table {flex: 4;table {width: 100%;border-spacing: 0;border-top: 1px solid #ccc;border-left: 1px solid #ccc;th {background: #f5f5f5;}tr:hover td {background: #f5f5f5;}td,th {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;text-align: center;padding: 10px;.red {color: red;}}}.none {height: 100px;line-height: 100px;color: #999;}}.form {flex: 1;padding: 20px;.form-item {display: flex;margin-bottom: 20px;align-items: center;}.form-item .label {width: 60px;text-align: right;font-size: 14px;}.form-item .input {flex: 1;}.form-item input,.form-item select {appearance: none;outline: none;border: 1px solid #ccc;width: 200px;height: 40px;box-sizing: border-box;padding: 10px;color: #666;}.form-item input::placeholder {color: #666;}.form-item .cancel,.form-item .submit {appearance: none;outline: none;border: 1px solid #ccc;border-radius: 4px;padding: 4px 10px;margin-right: 10px;font-size: 12px;background: #ccc;}.form-item .submit {border-color: #069;background: #069;color: #fff;}}
}
/style一增加功能
添加添加思路 ①、获取科目 和 分数 ②、给添加按钮注册点击事件 ③、给list数组添加一个对象 ④、重置表单数据
div classformdiv classform-itemdiv classlabel科目/divdiv classinput!--2.点击后,用户输入的信息拿得到v-modelsubject data里面有数据 --input typetext placeholder请输入科目 v-modelsubject//div/divdiv classform-itemdiv classlabel分数/divdiv classinput!--2.点击后,用户输入的信息拿得到v-model.numberscore data里面有数据 --input typetext placeholder请输入分数 v-model.numberscore//div/divdiv classform-itemdiv classlabel/divdiv classinput!--1.用户点按钮,注册事件clickadd --button classsubmit clickadd添加/button/div/div
/divscript
export default {methods:{// 2.点击后,用户输入的信息拿得到v-model变量 data里面有数据add(){console.log(this.subject,this.score);if(this.score || this.subject){alert(输入不能为空);return;}// 3.数据拿到后,准备下进入list数组内// 进入之前,变成和list数组内其他成员一样模样let one {id:Math.random(),subject:this.subject,score:this.score,date:new Date()};this.list.push(one);//点击后清空输入框this.subject;this.score;}}
};
/script二删除
findIndex方法常用来查找数组中满足条件的第一项元素的下标。先判断类型再判断值 如果类型不同直接falsearray.splice(start, deleteCount, item1, item2, …);用于删除数组中的元素。它可以修改原始数组并返回从数组中删除的元素。 ①、start指定开始删除的索引位置。 ②、deleteCount指定要删除的元素个数。 ③、item1, item2, …可选参数要插入到数组中的新元素。
tbodytr v-for(item,i) in list :keyitem.idtd{{ i1 }}/tdtd{{ item.subject }}/tdtd classred{{ item.score }}/tdtd{{ item.date }}/td!--1.用户点删除,注册事件clickadd --tda href# clickdel(item.id)删除/a/td/tr
/tbodyscript
export default {methods:{del(id){//找对应的下标把数组遍历下,看哪个成员的id点击这个id,那么该成员下标就是对应下标!// 先判断类型再判断值// 如果类型不同直接false// findIndex方法常用来查找数组中满足条件的第一项元素的下标// let i this.list.findIndex(itemitem.idid);let i;this.list.forEach((item,index){if(item.idid){i index;//找到对应下标}});// 4. 数组删除该成员this.list.splice(i,1);}}
};
/script三显示暂无数据
!-- tbody v-iflist.length0 --
tbody v-if!list.lengthtrtd colspan5span classnone暂无数据/span/td/tr
/tbody
tfoot v-elsetrtd colspan5span总分321/spanspan stylemargin-left:50px平均分80.25/span/td/tr
/tfoot四添加日期
安装moment
npm i moment引入moment
import moment from moment;//把下载包从node_modules找到包定义格式化的函数
tbodytr v-for(item,i) in list :keyitem.idtd{{ i1 }}/tdtd{{ item.subject }}/tdtd classred{{ item.score }}/tdtd{{ time(item.date) }}/td//tda href# clickdel(id)删除/a/td/tr
/tbodyscript
import moment from moment;//把下载包从node_modules找到包箭头。
export default{methods:{//时间处理//1.JS函数方法:moment(xxx).format(YYYY-MM-DD HH:mm:ss)//2.代码只能写在某个作用域范围内//3.moment(?):不能写死专门处理某个时间字符串,要处理每一个字符串//注意{{变量、表达式、自己下面定义函数(实参)}}time(str){return moment(str).format(YYYY-MM-DD HH:mm:ss);//处理完成}}};
/script五总分均分
分数的求和 reduceJavaScript中的reduce()方法是数组的一个高阶函数它可以对数组中的每个元素进行迭代并将它们汇总成一个值。reduce()方法接收一个回调函数作为参数这个回调函数可以接受四个参数accumulator累加器、currentValue当前值、currentIndex当前索引和array原始数组。
const numbers [1, 2, 3, 4, 5];
const sum numbers.reduce((accumulator, currentValue) accumulator currentValue, 0);console.log(sum); // 输出15reduce()方法从数组numbers中求和。初始累加器的值为0回调函数中的累加器accumulator表示当前的总和currentValue表示数组中的当前元素。在每一次迭代中回调函数将累加器与当前元素相加并返回新的累加器的值。最终reduce()方法返回的就是累加结果。
tfoot v-elsetrtd colspan5span总分:{{ zf }}/spanspan stylemargin-left:50px平均分:{{junf}}/span/td/tr
/tfootscript
export default {name: ScoreCase,data () {computed:{zf(){//分数的求和 reducereturn this.list.reduce((sum,item){return sumitem.score;},0);//分数的求和 reduce//return this.list.reduce((sum,item)sumitem.score,0);},junf(){return this.zf/this.list.length;}}
};
/script六数据本地化
在add()和del()方法里面的最后一行写入代码
// 存入本地
localStorage.setItem(list,JSON.stringify(this.list));但是上述情况一点击刷新浏览器数据还是没有改变还是初始值。那么我们就需要将list进行本地获取。
data () {return {list: JSON.parse(localStorage.getItem(list)),//为了让add拿到数据subject: ,score: }},但是要是本地list没有数据那么页面就会报错不会显示。那么我们还需要加一个[]
list: JSON.parse(localStorage.getItem(list)) || [],
