Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能

一、成绩案例

  • ✅✅✅通过本次案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能。
  • 准备成绩案例模板,我们需要在这些模板上面进行功能操作。
html 复制代码
<template>
  <div class="score-case">
    <div class="table">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>考试时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,i) in list" :key="item.id">
            <td>{{ i+1 }}</td>
            <td>{{ item.subject }}</td>
            <td class="red">{{ item.score }}</td>
            <td>{{ item.date }}</td>
            <td><a href="#">删除</a></td>
          </tr>
        </tbody>
        <!-- <tbody >
          <tr>
            <td colspan="5">
              <span class="none">暂无数据</span>
            </td>
          </tr>
        </tbody> -->
        <tfoot>
          <tr>
            <td colspan="5">
              <span>总分:321</span>
              <span style="margin-left:50px">平均分:80.25</span>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="form">
      <div class="form-item">
        <div class="label">科目:</div>
        <div class="input">
          <input type="text" placeholder="请输入科目" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数:</div>
        <div class="input">
          <input type="text" placeholder="请输入分数" />
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="submit" >添加</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
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: ''
    }
  }
};
</script>

<style lang="less">
.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数组添加一个对象
    ④、重置表单数据
html 复制代码
<div class="form">
  <div class="form-item">
    <div class="label">科目:</div>
    <div class="input">
      <!--2.点击后,用户输入的信息拿得到!v-model="subject" data里面有数据 -->
      <input type="text" placeholder="请输入科目" v-model="subject"/>
    </div>
  </div>
  <div class="form-item">
    <div class="label">分数:</div>
    <div class="input">
      <!--2.点击后,用户输入的信息拿得到!v-model.number="score" data里面有数据 -->
      <input type="text" placeholder="请输入分数" v-model.number="score"/>
    </div>
  </div>
  <div class="form-item">
    <div class="label"></div>
    <div class="input">
   	  <!--1.用户点按钮,注册事件@click="add" -->
      <button class="submit" @click="add">添加</button>
    </div>
  </div>
</div>

<script>
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方法常用来查找数组中满足条件的第一项元素的下标。
  • 💪==先判断类型,再判断值 ===如果类型不同,直接false
  • 💪array.splice(start, deleteCount, item1, item2, ...);用于删除数组中的元素。它可以修改原始数组,并返回从数组中删除的元素。
    ①、start:指定开始删除的索引位置。
    ②、deleteCount:指定要删除的元素个数。
    ③、item1, item2, ...:可选参数,要插入到数组中的新元素。
html 复制代码
<tbody>
  <tr v-for="(item,i) in list" :key="item.id">
    <td>{{ i+1 }}</td>
    <td>{{ item.subject }}</td>
    <td class="red">{{ item.score }}</td>
    <td>{{ item.date }}</td>
    <!--1.用户点删除,注册事件@click="add" -->
    <td><a href="#" @click="del(item.id)">删除</a></td>
  </tr>
</tbody>

<script>
export default {
  methods:{
    del(id){
      //找对应的下标:把数组遍历下,看哪个成员的id==点击这个id,那么该成员下标就是对应下标!
      
      // ==先判断类型,再判断值
      // ===如果类型不同,直接false
      // findIndex方法常用来查找数组中满足条件的第一项元素的下标
      // let i = this.list.findIndex(item=>item.id==id);

      let i;
      this.list.forEach((item,index)=>{
        if(item.id==id){
          i = index;//找到对应下标
        }
      });

      // 4. 数组删除该成员
      this.list.splice(i,1);
    }
  }
};
</script>

(三)💬💬💬显示暂无数据

html 复制代码
<!-- <tbody v-if="list.length===0"> -->
<tbody v-if="!list.length">
  <tr>
    <td colspan="5">
      <span class="none">暂无数据</span>
    </td>
  </tr>
</tbody>
<tfoot v-else>
  <tr>
    <td colspan="5">
      <span>总分:321</span>
      <span style="margin-left:50px">平均分:80.25</span>
    </td>
  </tr>
</tfoot>

(四)💬💬💬添加日期

  • 🍕安装moment
handlebars 复制代码
npm i moment
  • 🍕引入moment
js 复制代码
import moment from "moment";//把下载包从node_modules找到包
  • 🍕定义格式化的函数
html 复制代码
<tbody>
  <tr v-for="(item,i) in list" :key="item.id">
    <td>{{ i+1 }}</td>
    <td>{{ item.subject }}</td>
    <td class="red">{{ item.score }}</td>
    <td>{{ time(item.date) }}</td>//👈👈👈👈👈👈
    <td><a href="#" @click="del(id)">删除</a></td>
  </tr>
</tbody>

<script>
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>

(五)💬💬💬总分均分

  • 🍕分数的求和 reduce
  • JavaScript中的reduce()方法是数组的一个高阶函数,它可以对数组中的每个元素进行迭代,并将它们汇总成一个值。
  • 🍕reduce()方法接收一个回调函数作为参数,这个回调函数可以接受四个参数:accumulator(累加器)、currentValue(当前值)、currentIndex(当前索引)和array(原始数组)。
javascript 复制代码
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 输出:15
  • 🍕reduce()方法从数组numbers中求和。初始累加器的值为0,回调函数中的累加器accumulator表示当前的总和,currentValue表示数组中的当前元素。在每一次迭代中,回调函数将累加器与当前元素相加,并返回新的累加器的值。最终,reduce()方法返回的就是累加结果。
html 复制代码
<tfoot v-else>
  <tr>
    <td colspan="5">
      <span>总分:{{ zf }}</span>
      <span style="margin-left:50px">平均分:{{junf}}</span>
    </td>
  </tr>
</tfoot>

<script>
export default {
  name: 'ScoreCase',
  data () {
  computed:{
    zf(){
      //分数的求和 reduce
      return this.list.reduce((sum,item)=>{
        return sum+=item.score;
      },0);
      //分数的求和 reduce
      //return this.list.reduce((sum,item)=>sum+=item.score,0);
    },
    junf(){
      return this.zf/this.list.length;
    }
  }
};
</script>

(六)💬💬💬数据本地化

  • 🍕在add()和del()方法里面的最后一行写入代码
js 复制代码
// 存入本地
localStorage.setItem("list",JSON.stringify(this.list));


  • 🍕但是上述情况,一点击刷新浏览器,数据还是没有改变,还是初始值。那么我们就需要将list进行本地获取。
js 复制代码
data () {
   return {
     list: JSON.parse(localStorage.getItem("list")),
     //为了让add拿到数据
     subject: '',
     score: ''
   }
 },
  • 🍕但是要是本地list没有数据,那么页面就会报错,不会显示。那么我们还需要加一个[]
js 复制代码
list: JSON.parse(localStorage.getItem("list")) || [],
相关推荐
待磨的钝刨39 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式