【Vue】filter的用法
上一篇： vue的指令
https://blog.csdn.net/m0_67930426/article/details/134599378?spm=1001.2014.3001.5502
本篇所使用指令 v-for v-on v-html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><body><!--准备容器 -->
<div id="app"><h2>四大发明</h2><ul><li v-for="(item,index) in list"><span>{{item.name}}</span><span>{{item.creator}}</span><button @click="del(item.id)">删除</button></li><br><div v-html="url"></div></ul>
</div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>
/* Vue.config.productionTip =false;*/var app=new Vue({el:'#app',data: {list:[{id:1, name:'造纸术',creator:'蔡伦'},{id:2, name:'指南针',creator:'栾(luan)大'},{id:3, name:'火药',creator:'孙思邈'},{id:4, name:'活字印刷术',creator:'毕升'},],url:'<a href="https://zhidao.baidu.com/question/37807254.html">百度知道</a>'},methods:{del(id){this.list=this.list.filter(item=> item.id!=id)}}});
</script>
</body>
</html>filter的作用：根据条件，保留满足条件的对应项，得到一个新数组
methods:{del(id){this.list=this.list.filter(item=> item.id!=id)}}注意： 方法名不能使用delete
意思是说 不能使用Javascript的关键字作为属性名
点击删除
再刷新一下
相关文章：
【Vue】filter的用法
上一篇： vue的指令 https://blog.csdn.net/m0_67930426/article/details/134599378?spm1001.2014.3001.5502 本篇所使用指令 v-for v-on v-html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…...
python web项目导包规范
python web项目导包规范 python 内置的模块通过第三方库安装的模块框架自身提供的模块用户自己定义的模块 如： from __future__ import absolute_import, unicode_literalsfrom debug_toolbar.panels import Panelfrom django.utils.translation import ugettext_…...
AtCoder Beginner Contest 330 题解
目录 A - Counting PassesB - Minimize Abs 1C - Minimize Abs 2D - Counting LsE - Mex and Update A - Counting Passes 原题链接 题目描述 给定N个数和一个整数L，输出大于等于L的数的个数。 public static void solve() throws IOException{int n readInt(), m…...
论文速读《DeepFusion: Lidar-Camera Deep Fusion for Multi-Modal 3D Object Detection》
概括主要内容 文章《DeepFusion: Lidar-Camera Deep Fusion for Multi-Modal 3D Object Detection》提出了两种创新技术，以改善多模态3D检测模型的性能，通过更有效地融合相机和激光雷达传感器数据来提高对象检测的准确性，尤其是在行人检测方面…...
关于前端处理后端轮询的操作 （总结）
使用场景：前端首次发起请求获取数据，若失败则每隔1s发起一次知道成功获取数据为止解决方案： 使用轮询操作，涉及定时器的使用和关闭 （使用vue2代码为例) data() {return {pollingResult_en: null, // 处理轮询结果bizI…...
【SpringCloud】设计原则之单一职责与服务拆分
一、设计原则之单一职责 设计原则很重要的一点就是简单，单一职责也就是所谓的专人干专事 一个单元（一个类、函数或微服务）应该有且只有一个职责 无论如何，一个微服务不应该包含多于一个的职责 职责单一的后果之一就是职责单…...
UDP分片和丢包与TCP效果对比
UDP 分片 与 丢包，UDP 真的比 TCP 高效吗？ UDP（用户数据报协议）和TCP（传输控制协议）在很多方面都有显著的区别。总体来说，TCP更适合需要可靠传输的应用，例如网页浏览、电子邮件等&a…...
Inport 模块
文章目录 Interpolate datainport 模块存在于模型最顶层Port Dimension 和 Variable-size signal Interpolate data Interpolate data：当将 Workspace 的数据导人模型时, 对没有对应数据点的采样时刻进行线性插值的开关选项。 inport 模块存在于模型最顶层 inpo…...
Deep Learning for Monocular Depth Estimation: A Review.基于深度学习的深度估计
传统的深度估计方法通常是使用双目相机，计算两个2D图像的视差，然后通过立体匹配和三角剖分得到深度图。然而，双目深度估计方法至少需要两个固定的摄像机，当场景的纹理较少或者没有纹理的时候，很难从图像中捕捉足够的特…...
点云从入门到精通技术详解100篇-基于深度学习的稀疏点云障碍物检测（续）
目录 3.1 连续帧点云空间特征融合 3.1.1 点云预处理 3.1.2 地面分割 3.1.3 自适应点云聚类...
使用VSCode+PlatformIO搭建ESP32开发环境
Arduino IDE本来就是为创客们开发的，虽然没代码提示功能，文件的关系也不清晰，函数不能跳转，头文件也打不开，但人家的初衷就是为了简单而生的；但还是有一些同学喜欢高级点的IDE，也没问题…...
使用flask返回json格式的数据
Flask Flask是一个使用Python编写的轻量级Web框架，它的设计理念是保持简单、灵活和易扩展。它的核心是Werkzeug和Jinja2，并且它本身只提供了非常基础的Web框架功能，例如路由和请求处理等。 使用Flask可以快速创建一个Web应用程序，…...
如何排查java 内存溢出OutOfMemoryError？
当使用Spring Boot进行文件上传时，文件会被读取到内存中进行处理。如果上传的文件较大，会占用大量的内存空间，从而导致内存溢出（OutOfMemory）问题。以下是一些建议的排查方案： 调整 JVM 内存设置ÿ…...
Prometheus环境搭建和认识
Prometheus 环境搭建 1.prometheus 简介 Prometheus是基于go语言开发的一套开源的监控、报警和时间序列数据库的组合，是由SoundCloud公司开发的开源监控系统，Prometheus于2016年加入CNCF（Cloud Native Computing Foundation,云原生计算基金…...
openGauss学习笔记-130 openGauss 数据库管理-参数设置-重设参数
文章目录 openGauss学习笔记-130 openGauss 数据库管理-参数设置-重设参数130.1 背景信息130.2 GUC参数设置130.3 操作步骤130.4 示例 openGauss学习笔记-130 openGauss 数据库管理-参数设置-重设参数 130.1 背景信息 openGauss提供了多种修改GUC参数的方法，用户可…...
每日OJ题_算法_双指针_力扣11. 盛最多水的容器
力扣11. 盛最多水的容器 11. 盛最多水的容器 - 力扣（LeetCode） 难度 中等 给定一个长度为 n 的整数数组 height 。有 n 条垂线，第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线，使得它们与 x 轴共同构成…...
数据仓库
一. 各种名词解释 1.1 ODS是什么？ ODS层最好理解，基本上就是数据从源表拉过来，进行etl，比如mysql 映射到hive，那么到了hive里面就是ods层。 ODS 全称是 Operational Data Store，操作数据存储.“面向主题的…...
Redis常用操作及应用（一）
一、五种数据结构 二、String结构 1、字符串常用操作 SET key value //存入字符串键值对 MSET key value [key value ...] //批量存储字符串键值对 SETNX key value //存入一个不存在的字符串键值对 GET key //获取一个字符串键值 MGET key [ke…...
数据结构-树
参考：https://www.hello-algo.com/chapter_tree/binary_tree/#711 1. 介绍 树存储不同于数组和链表的地方在于既可以保证数据检索的速度，又可以保证数据插入删除修改的速度，二者兼顾。 二叉树是一种很重要的数据结构，是非线性的…...
解决ElementUI时间选择器回显出现Wed..2013..中国标准时间.
使用饿了么组件 时间日期选择框回显到页面为啥是这样的？ 为什么再时间框中选择日期，回显页面出现了这种英文格式呢？？？？ 其实这个问题直接使用elementui的内置属性就能解决 DateTimePicker 日期时间选择…...
LiveAutoRecord：终极跨平台直播录制解决方案，轻松实现多平台直播自动录制
LiveAutoRecord：终极跨平台直播录制解决方案，轻松实现多平台直播自动录制 【免费下载链接】LiveAutoRecord 基于 Electron 的多平台直播自动录制软件 项目地址: https://gitcode.com/GitHub_Trending/li/LiveAutoRecord 你是否曾因为错过心爱主播…...
如何快速优化Windows系统：Winhance中文版完整指南
如何快速优化Windows系统：Winhance中文版完整指南 【免费下载链接】Winhance-zh_CN A Chinese version of Winhance. C# application designed to optimize and customize your Windows experience. 项目地址: https://gitcode.com/gh_mirrors/wi/Winhance-zh_CN …...
从光场相机到手机摄影：聊聊那些让你‘先拍照后对焦’的黑科技是怎么实现的
从光场相机到手机摄影：揭秘“先拍照后对焦”背后的技术革命 你是否曾在拍完照片后，发现焦点没有对准想要的主体？或是拍完人像照片后，想要调整背景虚化程度？这些看似神奇的功能，其实都源自于一项被称为“光场…...
Cursor AI Pro功能持续使用技术方案：多语言环境下的设备限制解决方案
Cursor AI Pro功能持续使用技术方案：多语言环境下的设备限制解决方案 【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youve re…...
终极免费音频格式转换解决方案：FlicFlac让Windows音频处理变得简单高效
终极免费音频格式转换解决方案：FlicFlac让Windows音频处理变得简单高效 【免费下载链接】FlicFlac Tiny portable audio converter for Windows (WAV FLAC MP3 OGG APE M4A AAC) 项目地址: https://gitcode.com/gh_mirrors/fl/FlicFlac 还在为音频格式不兼容…...
从算法到应用：I-TASSER蛋白质结构预测实战解析
1. I-TASSER：蛋白质结构预测的"瑞士军刀" 第一次接触I-TASSER是在研究生课题遇到膜蛋白结构预测难题时。当时试遍了各种在线服务器，直到实验室师兄扔给我一个U盘："试试这个本地版，比服务器更灵活"。没想到这…...
ARM平台下atomic_add的底层实现：ldrex/strex指令是如何保证原子性的？
ARM平台下atomic_add的底层实现：ldrex/strex指令是如何保证原子性的？ 在多核处理器成为主流的今天，原子操作的重要性愈发凸显。想象一下，当多个CPU核心同时对一个共享变量进行修改时，如何确保这个操作不会被中断&#…...
openresty 和nginx配置
对于upstream负载均衡配置 1.如果后端报错直接返回500 可以直接使用 upstreamupstream backend {server1,server2 } location /api{proxy_pass https://backend/;proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;proxy_next_upstream_…...
Rust的匹配中的区别语义
Rust的匹配机制以其强大的表达能力和安全性著称，而其中的"区别语义"更是其核心特性之一。所谓区别语义，指的是Rust在模式匹配时能够精确区分不同场景下的行为差异，从而避免常见错误并提高代码的可靠性。这种设计使得Rust在处理复杂…...
实战：从URL直接加载PyTorch预训练权重（以torch.hub为例），并处理常见的网络与缓存问题
实战：从URL直接加载PyTorch预训练权重（以torch.hub为例），并处理常见的网络与缓存问题 在深度学习项目的实际开发中，我们经常需要加载预训练模型权重。传统做法是先将权重文件下载到本地，再通过torch.load(…...