当前位置：首页 > wzjs >正文

前端旅游网站行程怎么做如何提高网站在百度的排名

wzjs 2025/8/28 22:30:30

前端旅游网站行程怎么做,如何提高网站在百度的排名,南通江苏网站建设,铭做网站建设Vue实现成绩增删案例案例功能需求案例实现实现思路完整代码功能演示案例小结案例功能需求 1.通过vue渲染数据，将成绩的相关信息显示出来（学号，学科，成绩） 2.能够增加相关的成绩信息 3.能够删除相关的成绩信息 4.能…

Vue实现成绩增删案例

案例功能需求
案例实现
- 实现思路
- 完整代码
- 功能演示
案例小结

案例功能需求

1.通过vue渲染数据，将成绩的相关信息显示出来（学号，学科，成绩）
2.能够增加相关的成绩信息
3.能够删除相关的成绩信息
4.能够自动统计总分以及平均分
5.在没有数据时，显示特定内容

案例实现

实现思路

数据渲染：
数据通过table表格来展示
通过v-for指令，将存储在数组中的数据嵌入td

 <tr v-for="item in list" :key="item.id"><td>{{item.id}}</td><td>{{item.subject}}</td><td>{{item.score}}</td><td><a href=""  @click.prevent="del(item.id)">删除</a></td></tr>

自动统计：
总分：通过computed计算属性，利用reduce()函数,对数组的成绩进行累加计算并返回累加结果

return this.list.reduce((sum, item) => sum + Number(item.score), 0)

平均分：
调用之前设计进行累加的计算方法，将获取的值除以信息总条数，获取平均分，并将其返回

return (this.show01 /this.list.length).toFixed(2)

增加信息：

对输入框添加v-model指令，进行数据的双向绑定，将输入的数据通过push()，放入存储数据的数组中

this.list.push({id:this.t1,subject:this.t2,score:this.t3})

删除信息：

创建方法，传入要删除信息的id（学号），遍历数组，将含有该id的信息从数组中删除

for(let i=0;i<this.list.length;i++){if(this.list[i].id==ID){this.list.splice(i,1)return;}}

显示特定内容：
通过v-if指令，当存储数据的数组长度为0时，将其设为true，则能将内容展示出来

<tbody v-if="ifshow<=0? true:false"></thbody>

完整代码

<template><table><thead><tr><th>学号</th><th>学科</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="ifshow>0? true:false"><tr v-for="item in list" :key="item.id"><td>{{item.id}}</td><td>{{item.subject}}</td><td>{{item.score}}</td><td><a href=""  @click.prevent="del(item.id)">删除</a></td></tr><tr class="tr_01"><td colspan="2" class="td1">总分：{{show01}}</td><td colspan="2" class="td2">平均分：{{ave}}</td></tr></tbody><tbody v-if="ifshow<=0? true:false"><tr><td colspan="4" class="td_01">数据为空</td></tr></tbody></table><div class="div_01"><label :class="{red :tt1,green: tt2}">{{show02}}</label><br><span><label for="">学号：</label><input type="text" name="" id="" v-model="t1"></span><br><span><label for="">学科：</label><input type="text" name="" id=""  v-model="t2"></span><br><span><label for="">成绩：</label><input type="text" name="" id=""  v-model="t3"></span><br><input type="submit" value="添加"  @click="add"></div>
</template><script>console.log(new Date())export default {data() {return {list:[{id:101,subject:'语文',score:99.9}],t1:"",t2:"",t3:"",show02:"",tt1:"",tt2:""}},methods:{del(ID){for(let i=0;i<this.list.length;i++){if(this.list[i].id==ID){this.list.splice(i,1)return;}}},add(){if(this.t1!=""&&this.t2!=""&&this.t3!=""){this.list.push({id:this.t1,subject:this.t2,score:this.t3})this.show02='正确'this.tt2=truethis.tt1=false}else{this.show02='输入内容不全'this.tt2=falsethis.tt1=true}this.t1=this.t2=this.t3=""console.log(this.tt1)console.log(this.tt2)},},computed:{ifshow(){return this.list.length},show01(){return this.list.reduce((sum, item) => sum + Number(item.score), 0)},ave() {if (this.list.length === 0) {return 0}else{return (this.show01 / this.list.length).toFixed(2)}},}}
</script><style>*{margin: 0;padding: 0;}table{border: 1px solid black;/* 合并 */border-collapse: collapse;margin: 5px;}th,td{border: 1px solid black;width: 100px;height: 50px;text-align: center;}.td_01{height: 130px;}.tr_01 td{border: none;}.td1{text-align: right;padding-right: 10px;}.td2{text-align: left;padding-left: 10px;}.div_01{position: fixed;left: 500px;top: 30px;}label{font-size: 18px;}input[type="text"]{width: 175px;height: 25px;}input[type="submit"]{display: block;margin: 5px auto;width: 47px;height: 27px;}.red{margin-left: 50px;color: red;}.green{margin-left: 50px;color: green;}
</style>