vue使用v-if和:class完成条件渲染

1.使用v-if 和v-else 完成主body和暂无数据两个**<tbody>**标签的条件渲染(注意与v-show效果的区别)

2.v-for完成列表渲染

3.:class完成分数标红的条件控制

删哪个就传哪个的id,基于这个id去过滤掉相同id的项,把剩下的项返回

javascript 复制代码
 <td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td>




 del (id) {
            // console.log(id)
            this.list = this.list.filter(item => item.id !== id)
          },

a标签的默认点击事件会跳转 这里要禁止默认事件

即使用@click.provent 就可以,像调方法一样传事件参数即可

相关推荐
前端摸鱼匠1 小时前
Vue 3 的defineEmits编译器宏:详解<script setup>中defineEmits的使用
前端·javascript·vue.js·前端框架·ecmascript
徐小夕1 小时前
我花一天时间Vibe Coding的开源AI工具,一键检测你的电脑能跑哪些AI大模型
前端·javascript·github
英俊潇洒美少年1 小时前
Vue3 企业级封装:useEventListener + 终极版 BaseEcharts 组件
前端·javascript·vue.js
方安乐3 小时前
单元测试之helper函数
前端·javascript·单元测试
灼灼桃花夭4 小时前
js之阳历 → 农历(含时辰)转换函数
开发语言·前端·javascript
小李子呢02115 小时前
前端八股性能优化(1)---防抖和节流
开发语言·前端·javascript
ayqy贾杰5 小时前
Claude Code 重构,并行化或终结 IDE 时代
前端·javascript·面试
tanis_36 小时前
MinerU JS/TS SDK 深度指南:JavaScript/TypeScript 开发者的 PDF/文档解析利器
javascript
颜酱6 小时前
智能体与工作流:从「想做一个应用」到「能跑通一条链」
前端·javascript·人工智能
槐序十七^6 小时前
某坤行md5__1101 请求头zkhs 分析
javascript·js逆向·python爬虫·md5__1101·sha1加密