当前位置：首页 > news >正文

【Vue】filter的用法

news 2026/2/10 9:06:42

上一篇： 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"&…...

编程日记 2023/11/26 4:43:58

python web项目导包规范 python 内置的模块通过第三方库安装的模块框架自身提供的模块用户自己定义的模块如： from __future__ import absolute_import, unicode_literalsfrom debug_toolbar.panels import Panelfrom django.utils.translation import ugettext_…...

编程日记 2023/11/26 4:42:57

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…...

编程日记 2023/11/26 4:41:56

论文速读《DeepFusion: Lidar-Camera Deep Fusion for Multi-Modal 3D Object Detection》

概括主要内容文章《DeepFusion: Lidar-Camera Deep Fusion for Multi-Modal 3D Object Detection》提出了两种创新技术，以改善多模态3D检测模型的性能，通过更有效地融合相机和激光雷达传感器数据来提高对象检测的准确性，尤其是在行人检测方面…...

编程日记 2023/11/26 4:40:55

关于前端处理后端轮询的操作（总结）

使用场景：前端首次发起请求获取数据，若失败则每隔1s发起一次知道成功获取数据为止解决方案： 使用轮询操作，涉及定时器的使用和关闭 （使用vue2代码为例) data() {return {pollingResult_en: null, // 处理轮询结果bizI…...

编程日记 2023/11/26 4:39:51

【SpringCloud】设计原则之单一职责与服务拆分

一、设计原则之单一职责设计原则很重要的一点就是简单，单一职责也就是所谓的专人干专事一个单元（一个类、函数或微服务）应该有且只有一个职责无论如何，一个微服务不应该包含多于一个的职责职责单一的后果之一就是职责单…...

编程日记 2023/11/26 4:38:50

UDP分片和丢包与TCP效果对比

UDP 分片与丢包，UDP 真的比 TCP 高效吗？ UDP（用户数据报协议）和TCP（传输控制协议）在很多方面都有显著的区别。总体来说，TCP更适合需要可靠传输的应用，例如网页浏览、电子邮件等&a…...

编程日记 2023/11/26 4:37:49

Inport 模块

文章目录 Interpolate datainport 模块存在于模型最顶层Port Dimension 和 Variable-size signal Interpolate data Interpolate data：当将 Workspace 的数据导人模型时, 对没有对应数据点的采样时刻进行线性插值的开关选项。 inport 模块存在于模型最顶层 inpo…...

编程日记 2023/11/26 4:36:48

Deep Learning for Monocular Depth Estimation: A Review.基于深度学习的深度估计

传统的深度估计方法通常是使用双目相机，计算两个2D图像的视差，然后通过立体匹配和三角剖分得到深度图。然而，双目深度估计方法至少需要两个固定的摄像机，当场景的纹理较少或者没有纹理的时候，很难从图像中捕捉足够的特…...

编程日记 2023/11/26 4:35:47

点云从入门到精通技术详解100篇-基于深度学习的稀疏点云障碍物检测（续）

目录 3.1 连续帧点云空间特征融合 3.1.1 点云预处理 3.1.2 地面分割 3.1.3 自适应点云聚类...

编程日记 2023/11/26 4:34:46

使用VSCode+PlatformIO搭建ESP32开发环境

Arduino IDE本来就是为创客们开发的，虽然没代码提示功能，文件的关系也不清晰，函数不能跳转，头文件也打不开，但人家的初衷就是为了简单而生的；但还是有一些同学喜欢高级点的IDE，也没问题&#xf…...

编程日记 2023/11/26 4:31:43

使用flask返回json格式的数据

Flask Flask是一个使用Python编写的轻量级Web框架，它的设计理念是保持简单、灵活和易扩展。它的核心是Werkzeug和Jinja2，并且它本身只提供了非常基础的Web框架功能，例如路由和请求处理等。使用Flask可以快速创建一个Web应用程序，…...

编程日记 2023/11/26 4:30:42

如何排查java 内存溢出OutOfMemoryError？

当使用Spring Boot进行文件上传时，文件会被读取到内存中进行处理。如果上传的文件较大，会占用大量的内存空间，从而导致内存溢出（OutOfMemory）问题。以下是一些建议的排查方案： 调整 JVM 内存设置&#xff…...

编程日记 2023/11/26 4:29:41

Prometheus环境搭建和认识

Prometheus 环境搭建 1.prometheus 简介 Prometheus是基于go语言开发的一套开源的监控、报警和时间序列数据库的组合，是由SoundCloud公司开发的开源监控系统，Prometheus于2016年加入CNCF（Cloud Native Computing Foundation,云原生计算基金…...

编程日记 2023/11/26 4:28:40

openGauss学习笔记-130 openGauss 数据库管理-参数设置-重设参数

文章目录 openGauss学习笔记-130 openGauss 数据库管理-参数设置-重设参数130.1 背景信息130.2 GUC参数设置130.3 操作步骤130.4 示例 openGauss学习笔记-130 openGauss 数据库管理-参数设置-重设参数 130.1 背景信息 openGauss提供了多种修改GUC参数的方法，用户可…...

编程日记 2023/11/26 4:27:39

每日OJ题_算法_双指针_力扣11. 盛最多水的容器

力扣11. 盛最多水的容器 11. 盛最多水的容器 - 力扣（LeetCode） 难度中等给定一个长度为 n 的整数数组 height 。有 n 条垂线，第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。找出其中的两条线，使得它们与 x 轴共同构成…...

编程日记 2023/11/26 4:26:37

数据仓库

一. 各种名词解释 1.1 ODS是什么？ ODS层最好理解，基本上就是数据从源表拉过来，进行etl，比如mysql 映射到hive，那么到了hive里面就是ods层。 ODS 全称是 Operational Data Store，操作数据存储.“面向主题的…...

编程日记 2023/11/26 4:25:36

Redis常用操作及应用（一）

一、五种数据结构二、String结构 1、字符串常用操作 SET key value //存入字符串键值对 MSET key value [key value ...] //批量存储字符串键值对 SETNX key value //存入一个不存在的字符串键值对 GET key //获取一个字符串键值 MGET key [ke…...

编程日记 2023/11/26 4:24:35

数据结构-树

参考：https://www.hello-algo.com/chapter_tree/binary_tree/#711 1. 介绍树存储不同于数组和链表的地方在于既可以保证数据检索的速度，又可以保证数据插入删除修改的速度，二者兼顾。二叉树是一种很重要的数据结构，是非线性的…...

编程日记 2023/11/26 4:23:34

解决ElementUI时间选择器回显出现Wed..2013..中国标准时间.

使用饿了么组件时间日期选择框回显到页面为啥是这样的？ 为什么再时间框中选择日期，回显页面出现了这种英文格式呢？？？？ 其实这个问题直接使用elementui的内置属性就能解决 DateTimePicker 日期时间选择…...

编程日记 2023/11/26 4:22:33

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解一、项目概述本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

QMC5883L的驱动

简介本篇文章的代码已经上传到了github上面，开源代码作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

在rocky linux 9.5上在线安装 docker

前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。然而，互联网…...

编程新知 2025/8/18 9:54:31

UDP(Echoserver)

网络命令 Ping 命令检测网络是否连通使用方法: ping -c 次数网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态常用选项： n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备网站技术分析： 使用浏览器开发者工具（F12&…...

编程新知 2025/10/19 5:48:51

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

html-＜abbr＞缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。示例&#x…...

编程新知 2026/1/24 19:22:03

相关文章：