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 就可以,像调方法一样传事件参数即可

相关推荐
SendTomo9 分钟前
WebRTC文件互传工具实测对比
javascript·网络·webrtc·html5·p2p
雪碧聊技术35 分钟前
Vue + Element Plus 实现文本溢出显示省略号及悬浮提示
前端·javascript·css·vue.js·文本溢出省略
张元清3 小时前
React useLatest Hook:在异步回调里读到最新状态 (2026)
javascript·react.js
Asize4 小时前
为什么写代码前要先规划组件树?Next.js + Redis 笔记系统实战
前端·javascript·next.js
meilindehuzi_a4 小时前
Next.js 全栈基础实战:从 SPA、SSR 到 App Router 与 Todo API
开发语言·javascript·ecmascript
渣波4 小时前
重构旅行体验:基于 React 的 AI 旅游助手对话系统实战解析
前端·javascript
李顿波4 小时前
Chrome 插件弹窗一直停留在初始的小尺寸 —— 你看到的小方块
前端·javascript·chrome
渣波4 小时前
React 移动端首页架构实战:从并发请求到防御性编程的深度解析
前端·javascript
Highcharts.js5 小时前
Highcharts 主流前端框架无缝集成指南
前端·vue.js·前端框架·highcharts·可视化图表