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

这篇具有很好参考价值的文章主要介绍了Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、成绩案例

  • ✅✅✅通过本次案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能。
    Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能,Vue,vue.js,javascript,前端,成绩管理
  • 准备成绩案例模板,我们需要在这些模板上面进行功能操作。
<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数组添加一个对象
    ④、重置表单数据
<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>

Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能,Vue,vue.js,javascript,前端,成绩管理

(二)💬💬💬删除

  • 💪findIndex方法常用来查找数组中满足条件的第一项元素的下标。
  • 💪==先判断类型,再判断值 ===如果类型不同,直接false
  • 💪array.splice(start, deleteCount, item1, item2, …);用于删除数组中的元素。它可以修改原始数组,并返回从数组中删除的元素。
    ①、start:指定开始删除的索引位置。
    ②、deleteCount:指定要删除的元素个数。
    ③、item1, item2, …:可选参数,要插入到数组中的新元素。
<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>

Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能,Vue,vue.js,javascript,前端,成绩管理

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

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

Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能,Vue,vue.js,javascript,前端,成绩管理

(四)💬💬💬添加日期

  • 🍕安装moment
npm i moment
  • 🍕引入moment
import moment from "moment";//把下载包从node_modules找到包
  • 🍕定义格式化的函数
<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>

Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能,Vue,vue.js,javascript,前端,成绩管理

(五)💬💬💬总分均分

  • 🍕分数的求和 reduce
  • JavaScript中的reduce()方法是数组的一个高阶函数,它可以对数组中的每个元素进行迭代,并将它们汇总成一个值。
  • 🍕reduce()方法接收一个回调函数作为参数,这个回调函数可以接受四个参数:accumulator(累加器)、currentValue(当前值)、currentIndex(当前索引)和array(原始数组)。
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()方法返回的就是累加结果。
<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()方法里面的最后一行写入代码
// 存入本地
localStorage.setItem("list",JSON.stringify(this.list));

Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能,Vue,vue.js,javascript,前端,成绩管理
Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能,Vue,vue.js,javascript,前端,成绩管理文章来源地址https://www.toymoban.com/news/detail-594661.html

  • 🍕但是上述情况,一点击刷新浏览器,数据还是没有改变,还是初始值。那么我们就需要将list进行本地获取。
data () {
   return {
     list: JSON.parse(localStorage.getItem("list")),
     //为了让add拿到数据
     subject: '',
     score: ''
   }
 },
  • 🍕但是要是本地list没有数据,那么页面就会报错,不会显示。那么我们还需要加一个[]
list: JSON.parse(localStorage.getItem("list")) || [],

到了这里,关于Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包