通过前几节的认识和学习,我们掌握了常用v标签的用法,这一节再来巩固提高一下吧。
实例:成绩面板
实现功能:
主体由两大部分组成:表格+表单。这个表格可以显示多科成绩,并具有表头、删除以及底部统计功能。同时,在下方还有一个成绩输入表单,允许用户添加科目成绩,新添加的成绩会实时显示在表格中。
思路:
综合运用不同v标签的使用
代码:
html:
<div id="app">
<table>
<thead>
<tr>
<th>编号</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<!-- 表格主体部分:使用v-if/else切换不同显示-当表格为空时,显示“暂无数据” -->
<tbody v-if="list.length > 0">
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ index+1 }}</td>
<td>{{ item.name }}</td>
<!-- 当成绩低于60分时,触发red类样式 -->
<td :class="{red: item.score < 60}">{{ item.score }}</td>
<!-- .prevent修饰符,阻止<a>标签的默认跳转行为 -->
<td><a @click.prevent="del(item.id)" href="">删除</a></td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td colspan="5">暂无数据</td>
</tr>
</tbody>
<footer>
<tr>
<td colspan="5">
总分: {{ total }}
平均分:{{ mean }}
</td>
</tr>
</footer>
</table>
科目:<input v-model.trim="subject" placeholder="请输入科目">
<br>
分数:<input v-model.number="score" placeholder="请输入分数">
<br>
<button @click="add()">确认</button>
</div>
js:
<script>
const app = new Vue({
el: '#app',
data: {
list:[
{id: 1, name: '语文', score: 46},
{id: 7, name: '数学', score: 77},
{id: 13, name: '英语', score: 85},
{id: 14, name: '体育', score: 95},
],
subject: '',
score: ''
},
methods: {
del(id) {
console.log(id)
this.list = this.list.filter(item => item.id != id);
},
add() {
if(this.subject === ''){
alert('请输入科目名称!')
return
}
if(this.score > 100 || this.score < 0){
alert('请输入0-100内的成绩!')
return
}
// 数组的push()和unshift()都是在原数组的基础上操作
this.list.push({
id: +new Date(),
name: this.subject,
score: this.score
} )
}
},
computed: {
total(){
return this.list.reduce((sum,item) => sum + item.score, 0)
},
mean(){
if(this.list.length === 0){
return 0
}
return (this.total/this.list.length).toFixed(2)
}
}
})
</script>
css:
<style>
table{
width: 400px;
height: 300px;
border-collapse: collapse;
margin-bottom: 20px;
text-align: center;
}
th,td{
border:1px solid black;
}
.red{
color: red;
}
</style>
注意:
案例中还有很多小的注意,比如:当成绩小于60分时,成绩要高亮显示-这要求使用v-bind动态控制元素的样式;表单元素输入要求去首尾空格、字符转数字-要求使用v-model的修饰符trim和number;当成绩表格为空时要求显示“暂无数据”面板-可以使用v-if/else根据数据长度动态切换显示...