【Vue】成绩案例
文章目录
- 一、功能描述
- 二、思路分析
- 三、完整代码
一、功能描述
1.渲染功能
2.删除功能
3.添加功能
4.统计总分，求平均分
二、思路分析
-
渲染功能 v-for :key v-bind:动态绑定class的样式（来回切换）
-
删除功能 v-on绑定事件， 阻止a标签的默认行为
-
v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据（这两个也可以不加，不加的话就需要通过js去判断，所以加上这两个就是简化代码的）
unshift 修改数组更新视图
-
使用计算属性computed， reduce求和 和 平均分的值
三、完整代码
<body><div id="app" class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><!-- 由于这两个tbody标签在页面中不能同时存在，必须销毁一个，所以使用v-if --><tbody v-if="list.length > 0"><tr v-for="(item, index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.subject }}</td><!-- 需求：不及格的标红, < 60 分, 加上 red 类 --><td :class="{ red: item.score < 60 }">{{ item.score }}</td><!-- 这里既要注册事件，又阻止了它跳 --><td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分：{{ totalScore }}</span><span style="margin-left: 50px">平均分：{{ averageScore }}</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目：</div><div class="input"><!-- 去掉首尾空格 --><input type="text" placeholder="请输入科目" v-model.trim="subject" /></div></div><div class="form-item"><div class="label">分数：</div><div class="input"><!-- 需要数字类型的，如果number没有转成功，则得到的是字符串 --><input type="text" placeholder="请输入分数" v-model.number="score" /></div></div><div class="form-item"><div class="label"></div><div class="input"><button @click="add" class="submit">添加</button></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '语文', score: 62 },{ id: 7, subject: '数学', score: 89 },{ id: 12, subject: '英语', score: 70 },],subject: '',score: ''},computed: {totalScore() {return this.list.reduce((sum, item) => sum + item.score, 0)},averageScore() {// 防止除 0 情况if (this.list.length === 0) {return 0}return (this.totalScore / this.list.length).toFixed(2)}},methods: {del(id) {// console.log(id)this.list = this.list.filter(item => item.id !== id)},add() {if (!this.subject) {alert('请输入科目')return}if (typeof this.score !== 'number') {alert('请输入正确的成绩')return}this.list.unshift({id: +new Date(),subject: this.subject,score: this.score})this.subject = ''this.score = ''}}})</script>
</body>