vue成绩单案例

最新推荐文章于 2025-05-26 16:38:55 发布

原生爱好者

最新推荐文章于 2025-05-26 16:38:55 发布

阅读量377

点赞数 1

分类专栏：小案例文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_52113974/article/details/135006198

版权

本文介绍了如何使用Vue.js构建一个包含动态表格的网页应用，展示科目、成绩和删除功能，同时实现计算总分和平均分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

 <div id="app">
       <table>
       <thead>
        <tr>
            <th>编号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
       </thead>

       <tbody v-if="list.length > 0">
        <tr v-for="(item,index) in list " :key="item.id">
            <td>{
  {index+1}}</td>
            <td>{
  {item.name}}</td>
            <td :class="{red: item.agm < 60}">{
  {item.agm}}</td>
            <td><button @click="shchu(item.id)">删除</button></td>
        </tr>
       </tbody>

       <tbody v-else="list.length < 0">
        <tr>
            <td colspan="5">
                <p>没有数据</p>