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

**Vue 成绩管理系统**

### 系统概述本系统是一个简单的成绩管理系统，支持添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能。

### 系统结构* **main.js**: 入口文件* **App.vue**: 主组件* **ScoreList.vue**: 成绩列表组件* **AddScore.vue**: 添加成绩组件* **DeleteScore.vue**: 删除成绩组件* **NoData.vue**: 无数据提示组件###代码实现#### main.js

javascriptimport Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = falsenew Vue({
 render: h => h(App),
}).$mount('#app')

html<template>
 <div id="app">
 <h1>成绩管理系统</h1>
 <ScoreList @add-score="handleAddScore" @delete-score="handleDeleteScore"></ScoreList>
 </div>
</template>

<script>
import ScoreList from './components/ScoreList.vue'
export default {
 name: 'App',
 components: { ScoreList },
 methods: {
 handleAddScore(score) {
 console.log('添加成绩:', score)
 },
 handleDeleteScore(id) {
 console.log('删除成绩:', id)
 }
 }
}
</script>

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top:60px;
}
</style>

html<template>
 <div>
 <h2>成绩列表</h2>
 <ul>
 <li v-for="(score, index) in scores" :key="index">
 {{ score.name }} - {{ score.score }}
 <button @click="handleDeleteScore(score.id)">删除</button>
 </li>
 </ul>
 <AddScore @add-score="handleAddScore"></AddScore>
 </div>
</template>

<script>
import AddScore from './components/AddScore.vue'
export default {
 name: 'ScoreList',
 components: { AddScore },
 data() {
 return {
 scores: [
 { id:1, name: '张三', score:90 },
 { id:2, name: '李四', score:80 }
 ]
 }
 },
 methods: {
 handleAddScore(score) {
 this.scores.push(score)
 },
 handleDeleteScore(id) {
 this.scores = this.scores.filter(score => score.id !== id)
 }
 }
}
</script>

<style>
ul {
 list-style: none;
 padding:0;
 margin:0;
}

li {
 margin-bottom:10px;
}

button {
 background-color: #4CAF50;
 color: #fff;
 border: none;
 padding:5px10px;
 font-size:16px;
 cursor: pointer;
}
</style>

html<template>
 <div>
 <h2>添加成绩</h2>
 <form @submit.prevent="handleAddScore">
 <label for="name">姓名:</label>
 <input type="text" id="name" v-model="score.name" />
 

 <label for="score">分数:</label>
 <input type="number" id="score" v-model.number="score.score" />
 

 <button type="submit">添加</button>
 </form>
 </div>
</template>

<script>
export default {
 name: 'AddScore',
 data() {
 return {
 score: { name: '', score:0 }
 }
 },
 methods: {
 handleAddScore() {
 this.$emit('add-score', this.score)
 this.score = { name: '', score:0 }
 }
 }
}
</script>

<style>
form {
 margin-bottom:20px;
}

label {
 display: block;
 margin-bottom:10px;
}

input[type="text"],
input[type="number"] {
 width:100%;
 height:30px;
 padding:5px;
 font-size:16px;
}
</style>

html<template>
 <div>
 <h2>删除成绩</h2>
 <form @submit.prevent="handleDeleteScore">
 <label for="id">ID:</label>
 <input type="number" id="id" v-model.number="id" />
 

 <button type="submit">删除</button>
 </form>
 </div>
</template>

<script>
export default {
 name: 'DeleteScore',
 data() {
 return {
 id:0 }
 },
 methods: {
 handleDeleteScore() {
 this.$emit('delete-score', this.id)
 this.id =0 }
 }
}
</script>

<style>
form {
 margin-bottom:20px;
}

label {
 display: block;
 margin-bottom:10px;
}

input[type="number"] {
 width:100%;
 height:30px;
 padding:5px;
 font-size:16px;
}
</style>

html<template>
 <div>
 <h2>无数据</h2>
 <p>暂无成绩信息...</p>
 </div>
</template>

<script>
export default {
 name: 'NoData'
}
</script>

<style>
p {
 font-size:16px;
 color: #666;
}
</style>