vue自定义指令---处理加载图片失败时出现的碎图,onerror事件
目录
一、自定义指令
1、局部注册和使用
2、全局注册和使用
二、自定义指令处理图片加载失败(碎图)
一、自定义指令
vue中除v-model、v-show等内置指令之外,还允许注册自定义指令,获取DOM元素,扩展额外的功能。
1、局部注册和使用
注册在组件内的script内的directives内
export default {directives:{focus:{ //自定义指令名inserted(el){ //el就是使用此指令的DOM元素,此处el指这个input框el.focus() //此el对应的DOM元素自动获取焦点}}} };使用时,v-自定义指令名即可
<input type="text" v-focus>
2、全局注册和使用
在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令
Vue.directive('Color', {inserted(el, binding) { //el代表此DOM元素,binding.value接收传递过来的参数el.style.color = binding.value //给此DOM元素设置文字颜色},update(el, binding) { //使用此指令的DOM更新就执行此方法el.style.color = binding.value} })所有的.vue文件都可直接使用
<!-- 传参为字符串" '颜色值' " 或 "变量" --> <p v-Color="'red'" >修改文字颜色</p>
注意点: inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
update方法 - 指令对应数据/标签更新时, 此方法执行,只要更新就触发el参数为使用此自定义指令的DOM元素
binding参数用来接收传的值,binging.value就是具体值
二、自定义指令处理图片加载失败(碎图)
1、在main.js中注册自定义指令,接收传递的值
Vue.directive('imgerror', {inserted(el, bindings) {el.onerror = function() { //当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerrorel.src = bindings.value //加载失败, 给一张默认图展示} } })2、组件中使用自定义指令值处理,
imgDefault1为用户可能出错的图,
imgDefault为正确的图,当用户图地址加载失败时,使用这个默认图,
img1为本地的图片,当用户没有图片数据,或数据为空时,加载此默认图
<!--v-imgerror指令传值加载失败时的图,:src逻辑与之后的img1为没有图片数据时加载的默认图 --> <img v-imgerror="imgDefault" :src="imgDefault1 || img1" alt="">补充:组件内直接使用图片方式
<script> import defaultImg from '图片路径' //第二种导入 export default{data(){return{img1: require('图片路径'), //第一种方式defaultImg:defaultImg //第二种}} } </script>
相关文章:
vue自定义指令---处理加载图片失败时出现的碎图,onerror事件
目录 一、自定义指令 1、局部注册和使用 2、全局注册和使用 二、自定义指令处理图片加载失败(碎图) 一、自定义指令 vue中除v-model、v-show等内置指令之外,还允许注册自定义指令,获取DOM元素,扩展额外的功能。 1、局…...
加盟管理系统挑选法则,看完不怕被坑!
经营服装连锁店铺究竟有多难?小编已经不止一次听到身边的老板,抱怨加盟连锁店铺难以管理了,但同时呢,也听到了很多作为加盟商的老板,抱怨总部给的支持和管理不到位。服装加盟店铺管理,到底有哪些难点呢&…...
alertmanager笔记
1 prometheus的思想 所有告警都应该立刻处理掉,不应该存在长时间未解决的告警。所以具体的表现就是高频的数据采集,和告警的自动恢复(默认5分钟) 2 alertmanager API调用 使用如下命令即可手工制造告警,注意startsA…...
Android Jetpack组件之WorkManager后台任务管理的介绍与使用(二)
一、介绍 通过上一篇文,Android Jetpack组件之WorkManager后台任务管理的介绍与使用(一)_蜗牛、Z的博客-CSDN博客 我们可以弄清楚workmanager从接入到使用的基本流程。基本可以满足我们日常。那只是简单的入门。如果遇到更复杂的功能,那简单的就无法满…...
【MySQL】第十七部分 约束
【MySQL】第十七部分 约束 文章目录【MySQL】第十七部分 约束17. 约束17.1 约束的分类17.2 非空约束17.3 唯一性约束17.4 主键约束17.5 自增列约束17.6 外键约束17.7 默认约束17.8 check约束总结17. 约束 约束: 可以在创建表的时候规定约束,也可以在表创建之后添加,约束顾名思…...
java ssm集装箱码头TOS系统调度模块的设计与实现
由于历史和经济体制的原因,国内码头物流企业依然保持大而全的经营模式。企业自己建码头、场地、经营集装箱运输车辆。不过近几年来随着经济改革的进一步深入和竞争的激烈,一些大型的码头物流企业逐步打破以前的经营模式,其中最明显的特征就是…...
MS14-064(OLE远程代码执行漏洞复现)
✅作者简介:CSDN内容合伙人、信息安全专业在校大学生🏆 🔥系列专栏 :内网安全-漏洞复现 📃新人博主 :欢迎点赞收藏关注,会回访! 💬舞台再大,你不上台…...
【C++深陷】之shared_ptr
0. 什么是智能指针 使用new 和delete 手动进行动态内存管理很容易出现内存泄漏等问题。C11为了更安全、更方便的管理动态内存,新的标准库提供了两种智能指针(smart pointer):shared_ptr和unique_ptr,以及一个伴随类we…...
SpringMVC中遇到的错误
SpringMVC中遇到的错误1.web.xml中配置SpringMVC核心类: DispatcherServlet 报错解决方案:添加Tomcat包2. not declaration can be found for element--------‘mvc:annotation-driven‘通配符的匹配很全面, 但无法找到元素 mvc:annotation-driven 的声明解决方案&a…...
姿态估计端到端新方案 | DirectMHP:用于全范围角度2D多人头部姿势估计
前言 现有的头部姿势估计主要集中在具有预先检测到的正面头部的单个人,这依赖于单独训练的面部检测器,不能很好地泛化到完整的视点。在本文中,作者关注全范围 MPHPE 问题,并提出了一个名为 DirectMHP 的直接端到端简单基线&#x…...
jvm学习的核心(五)---垃圾回收算法和常见垃圾回收器
文章目录1.垃圾回收算法**1.1. 标记阶段****1.2. 清除阶段**1.2.1.标记清除算法1.2.2.标记复制算法1.2.3.标记整理算法1.3.引用2.常见的垃圾回收器2.1.Serial回收器2.2.ParNew回收器2.3.Parallel回收器2.4.CMS回收器<font color red>2.5.G1垃圾回收器ZGC回收器ÿ…...
亿级高并发电商项目-- 实战篇 --万达商城项目 二(Zookeeper、Docker、Dubbo-Admin等搭建工作
👏作者简介:大家好,我是小童,Java开发工程师,CSDN博客博主,Java领域新星创作者 📕系列专栏:前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶 Ǵ…...
【C#基础】 C# 数据类型总结
序号系列文章0【C#基础】初识编程语言C#1【C#基础】C# 程序通用结构总结2【C#基础】C# 程序基础语法解析文章目录前言数据类型一. 值类型(Value types)二. 引用类型(Reference types)三. 指针类型(Pointer types&#…...
格子玻尔兹曼法介绍
1 LBM简介格子玻尔兹曼法(Lattice Boltzmann Method)简称LBM,是一种CFD算法,可求解流动、传热等常见CFD问题。LBM基于格子玻尔兹曼方程(LBE),从介观尺度(mesoscope)描述了…...
活动星投票在时间的河流上造园分组怎么设置如何进行分组报名
“在时间的河流上造园”网络评选投票_免费小程序运行系统_企业有关的投票_微信投票的应用小程序投票活动如何做?很多企业在运营当中,都会通过投票活动来进行推广,从而达到吸粉、增加用户粘度等效果。而此类投票活动,通过小程序就可…...
c#小笔记本-基础
c#基本知识一.基础操作1.打印-writeline,write2.输入-readline,readkey二.变量1.折叠代码-#region,#endregion2.变量类型(在c语言变量类型上新增的)三.常量-const四.转义字符五.显示转换1.括号强转-低精度装高精度2.parse法-作用于字符串3.co…...
DamiCMS SQL注入分析
2023年将会持续于B站、CSDN等各大平台更新,可加入粉丝群与博主交流:838681355,为了老板大G共同努力。 一、入口文件(单入口文件模式) 看一下Index.php文件代码:引入了php_safe.php文件 查看一下php_safe.php防御文件: 对变量e…...
图傅里叶变换的推导和理解
把传统的傅里叶变换以及卷积迁移到Graph上来,核心工作其实就是把拉普拉斯算子的特征函数 e − i ω t e^{-i\omega t} e−iω...
Java八股文(Java面试题)
JDK、JRE、JVM 三者之间的关系?JDK(Java Development Kit):是Java开发工具包,是整个Java的核心,包括了Java运行环境JRE、Java工具和Java基础类库。它能够创建和编译程序。JRE(Java Runtime Envi…...
java ssm idea高校图书借阅管理系统设计2z87z
本论文是以构建高校图书管理系统设计为目标,使用 jsp制作,由前台用户图书借阅、后台管理员图书分类两大部分组成。着重论述了系统设计分析,系统的实现(用户注册模块,用户登录,用户图书借阅模块,…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...
