黄江建设网站,天元网游关服了吗,做网站的价,怎么制作公众号二维码使用成绩需求来实现
详细的代码示例#xff08;主要练习 Vue 简单的计算属性#xff09;
需求功能技术点 渲染功能#xff1a; 不及格高亮、使用v-if v-else结局盒子互斥#xff0c;使用v-bind:class解决高亮。 删除功能#xff1a;点击传递id #xff0c;通过filter过…使用成绩需求来实现
详细的代码示例主要练习 Vue 简单的计算属性
需求功能技术点 渲染功能 不及格高亮、使用v-if v-else结局盒子互斥使用v-bind:class解决高亮。 删除功能点击传递id 通过filter过滤器过滤然后覆盖原数组使用指令修饰符。prevent阻止默认行为。 添加功能v-model双向绑定使用指令修饰符 trim number修饰功能。在使用unshift修改数组v-for会根据数组自动更新视图。 统计总分求平均分使用reduce求和需要在computed配置项中使用计算属性函数将计算逻辑返回的结果通过return暴露出来然后使用差值表达式 通过 属性的方式进行渲染即可。切记计算属性和函数方法长的一样都是函数但是使用计算属性必须写属性。{{ 计算属性名 }}后面不要小括号。 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /link relstylesheet href./styles/index.css /titleDocument/title/headbodydiv idapp classscore-casediv classtabletabletheadtrth编号/thth科目/thth成绩/thth操作/th/tr/theadtbody v-iflist.length 0tr v-for(item,index) in list :keyitem.idtd{{ index 1 }}/tdtd{{ item.subject }}/tdtd :class{red: item.score 60}{{ item.score}}/tdtda click.preventdel(item.id) href#删除/a/td/tr/tbodytbody v-elsetrtd colspan5span classnone暂无数据/span/td/tr/tbodytfoottrtd colspan5span总分{{ totalCount }}/spanspan stylemargin-left: 50px平均分{{ averageCount }}/span/td/tr/tfoot/table/divdiv classformdiv classform-itemdiv classlabel科目/divdiv classinputinput v-model.trimsubjecttypetextplaceholder请输入科目//div/divdiv classform-itemdiv classlabel分数/divdiv classinputinput v-model.numberscoretypetextplaceholder请输入分数//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: 20 },{ id: 7, subject: 数学, score: 80 },{ id: 12, subject: 英语, score: 70 },],subject: ,score: },methods: {del (id) {// 判断id进行过滤不需要删除的项然后将新数组重新赋值给listthis.list this.list.filter(item item.id ! id)// 这句代码的含义就是当我对数组一次遍历当前项的id不等于我传过来的全部过滤放到新数组然后重新赋值相等的不过滤就不会再渲染他删除。},add () {// 在v-model双向绑定后我们获取到数据后使用unshift在数组前面增加即可因为v-for会自动检测数据个数然后动态渲染this.list.unshift({// 切记list对象里面的格式是怎样的这里也需要保持一致id: new Date(),subject: this.subject,score: this.score})}},computed: {// 这里不需要修改所有我们直接使用简单的计算属性写法即可注意差值使用属性不要写成调用方法totalCount () {// 属性是可以直接通过this访问甚至都不需要声明return this.list.reduce((sum,item) sum item.score ,0)// 求和后有返回值用变量total接受然后使用return返回给函数哪里使用我们该函数就能访问到结果切记计算属性里面的函数可以理解为调用函数但是不要加小括号切记},averageCount () {// 解决品均分为 NaN的问题数组没有分数操作会显示这里判断如果长度为0直接返回0 且终止后面代码。if (this.list.length 0) {return 0}// 将返回值通过return暴露出去谁使用我们的计算属性名谁就能得到结果。return (this.totalCount / this.list.length).toFixed(2)}}})/script/body
/html
