网站建设成本预测表,网站下拉箭头怎么做的,店面设计绘画,wordpress固定菜单栏目录
一、自定义指令 1、局部注册和使用 2、全局注册和使用
二、自定义指令处理图片加载失败#xff08;碎图#xff09; 一、自定义指令 vue中除v-model、v-show等内置指令之外#xff0c;还允许注册自定义指令#xff0c;获取DOM元素#xff0c;扩展额外的功能。 1、局…目录
一、自定义指令 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 typetext v-focus2、全局注册和使用 在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-Colorred 修改文字颜色/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-imgerrorimgDefault :srcimgDefault1 || img1 alt 补充组件内直接使用图片方式 script
import defaultImg from 图片路径 //第二种导入
export default{data(){return{img1: require(图片路径), //第一种方式defaultImgdefaultImg //第二种}}
}
/script
