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 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
mayaairi3 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen3 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
BillKu4 小时前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss
默_笙5 小时前
❗ 给金鱼装记忆(上):从白板到笔记本,AI 的短期记忆生存指南
前端·javascript
兜里只有三分钱~6 小时前
翻卡_3D 的仪式感,和三个让它穿帮的写法
javascript·css·3d
mayaairi6 小时前
Vue2 组件通讯(四):v-model、scoped样式、mixins与plugins
前端·javascript·vue.js
前端炒粉6 小时前
DOM 常用 API 速查表
开发语言·javascript·ecmascript
星云API技术支持6 小时前
企业微信二次开发:如何建立统一的错误处理、日志与请求追踪机制
javascript·企业微信·ruby
武哥聊编程7 小时前
【AI实战项目】基于SpringAI+Springboot+Vue的AI面试刷题训练平台
vue.js·人工智能·spring boot·springai