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

bfhonor2023-07-21 16:31

一、成绩案例

  • ✅✅✅通过本次案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能。
  • 准备成绩案例模板，我们需要在这些模板上面进行功能操作。
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")) || [],
相关推荐
万物得其道者成4 分钟前
React Zustand状态管理库的使用
开发语言·javascript·ecmascript
小白小白从不日白5 分钟前
react hooks--useReducer
前端·javascript·react.js
下雪天的夏风17 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系，如何在TS 中使用 JS 不报错
前端·javascript·typescript
青稞儿23 分钟前
面试题高频之token无感刷新（vue3+node.js）
vue.js·node.js
diygwcom29 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
volodyan32 分钟前
electron react离线使用monaco-editor
javascript·react.js·electron
^^为欢几何^^41 分钟前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang1 小时前
vue3中开发引导页的方法
开发语言·前端·javascript
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法，亲测有效！！！
前端·javascript·vue.js
编程零零七5 小时前
Python数据分析工具(三)：pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习