vue2中使用v-html解析后如何找到img文字进行判断呢
时间: 2024-03-17 13:41:31 浏览: 50
要找到 `v-html` 解析后的文本中的 `img` 标签,可以使用以下方法:
1. 在 `mounted` 钩子函数中获取 `v-html` 渲染后的元素,并使用 DOM 操作获取所有的 `img` 标签。
2. 使用 `querySelectorAll` 方法获取所有的 `img` 标签,然后遍历这些标签,获取 `alt` 属性的值进行判断。
3. 如果需要在 `v-html` 渲染完成后进行判断,可以使用 `nextTick` 方法等待 DOM 更新完成后再进行操作。
以下是一个示例代码:
```html
<template>
<div v-html="htmlStr"></div>
</template>
<script>
export default {
data() {
return {
htmlStr: '<p>这是一段包含<img src="xxx" alt="图片描述">图片的文本</p>'
}
},
mounted() {
const imgList = this.$el.querySelectorAll('img')
imgList.forEach(img => {
if (img.alt === '图片描述') {
console.log('找到了图片描述为"图片描述"的图片')
}
})
}
}
</script>
```
阅读全文