vue3中v-lazy的error-class
时间: 2024-05-19 14:13:27 浏览: 109
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
在Vue3中,v-lazy指令可以用来延迟加载图片,而error-class属性用于在加载图片出错时添加自定义的类。
例如:
```
<template>
<div>
<img v-lazy="imageUrl" error-class="error"/>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://example.com/image.jpg',
};
},
};
</script>
<style>
.error {
filter: grayscale(100%);
}
</style>
```
在上面的例子中,如果加载图片出错,就会为该图片添加一个名为"error"的类,该类会将图片变为灰色。
阅读全文