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

相关推荐
gis开发之家19 分钟前
《Vue3 从入门到大神40篇》Vue3 源码详解(十):diff 算法全解析 —— 为什么 Vue3 比 Vue2 更快?
javascript·算法·typescript·前端框架·vue3·vue3源码
用户831348593069841 分钟前
Vue+Three.js实现PCB电路板3D交互:元器件点击高亮、部件显隐、模型自动旋转
vue.js·webgl·three.js
海带紫菜菠萝汤2 小时前
WebCodecs API 实战:浏览器原生视频编解码的原理与性能测试
前端·javascript·音视频·视频编解码
GitLqr3 小时前
提升 Web 开发效率:我常用的 10 个 TypeScript 实战技巧
vue.js·react.js·typescript
前端炒粉3 小时前
简易实现ssr
开发语言·前端·javascript
meilindehuzi_a4 小时前
Node.js + LangChain.js + Milvus 实战:从 EPUB 入库到《天龙八部》RAG 问答系统
javascript·langchain·node.js
勇往直前plus5 小时前
Vue3(篇四)单页面应用到路由管理
javascript·typescript·前端框架·vue
不简说6 小时前
JS 代码技巧 vol.9 — 20 个设计模式在真实项目里的应用
前端·javascript·github
勇往直前plus6 小时前
Vue3(篇三) Element Plus
前端·javascript·typescript·vue
AI_paid_community6 小时前
机械研发人员如何使用 Claude?
java·vue.js