建设积分兑换商城网站,做视频网站的备案要求,新媒体营销课程,做国外有那些网站比较好文章目录 一、功能描述二、思路分析三、完整代码 一、功能描述 1.渲染功能
2.删除功能
3.添加功能
4.统计总分#xff0c;求平均分 二、思路分析 渲染功能 v-for :key v-bind:动态绑定class的样式#xff08;来回切换#xff09; 删除功能 v-on绑定事件#xff0c; 阻止… 文章目录 一、功能描述二、思路分析三、完整代码 一、功能描述 1.渲染功能
2.删除功能
3.添加功能
4.统计总分求平均分 二、思路分析 渲染功能 v-for :key v-bind:动态绑定class的样式来回切换 删除功能 v-on绑定事件 阻止a标签的默认行为 v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据这两个也可以不加不加的话就需要通过js去判断所以加上这两个就是简化代码的 unshift 修改数组更新视图 使用计算属性computed reduce求和 和 平均分的值 三、完整代码
bodydiv idapp classscore-casediv classtabletabletheadtrth编号/thth科目/thth成绩/thth操作/th/tr/thead!-- 由于这两个tbody标签在页面中不能同时存在必须销毁一个所以使用v-if --tbody v-iflist.length 0tr v-for(item, index) in list :keyitem.idtd{{ index 1 }}/tdtd{{ item.subject }}/td!-- 需求不及格的标红, 60 分, 加上 red 类 --td :class{ red: item.score 60 }{{ item.score }}/td!-- 这里既要注册事件又阻止了它跳 --tda click.preventdel(item.id) hrefhttp://www.baidu.com删除/a/td/tr/tbodytbody v-elsetrtd colspan5span classnone暂无数据/span/td/tr/tbodytfoottrtd colspan5span总分{{ totalScore }}/spanspan stylemargin-left: 50px平均分{{ averageScore }}/span/td/tr/tfoot/table/divdiv classformdiv classform-itemdiv classlabel科目/divdiv classinput!-- 去掉首尾空格 --input typetext placeholder请输入科目 v-model.trimsubject //div/divdiv classform-itemdiv classlabel分数/divdiv classinput!-- 需要数字类型的如果number没有转成功则得到的是字符串 --input typetext placeholder请输入分数 v-model.numberscore //div/divdiv classform-itemdiv classlabel/divdiv classinputbutton clickadd classsubmit添加/button/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [{ id: 1, subject: 语文, score: 62 },{ id: 7, subject: 数学, score: 89 },{ id: 12, subject: 英语, score: 70 },],subject: ,score: },computed: {totalScore() {return this.list.reduce((sum, item) sum item.score, 0)},averageScore() {// 防止除 0 情况if (this.list.length 0) {return 0}return (this.totalScore / this.list.length).toFixed(2)}},methods: {del(id) {// console.log(id)this.list this.list.filter(item item.id ! id)},add() {if (!this.subject) {alert(请输入科目)return}if (typeof this.score ! number) {alert(请输入正确的成绩)return}this.list.unshift({id: new Date(),subject: this.subject,score: this.score})this.subject this.score }}})/script
/body
