后端es传到前端的多条字符串数据包含span标签,前端循环让该span标签背景高亮vue
时间: 2024-05-06 15:15:32 浏览: 53
前端显示代码高亮
你可以在前端使用Vue的v-html指令来渲染包含span标签的多条字符串数据,并通过CSS样式来设置背景高亮。具体步骤如下:
1. 在Vue中定义一个数据属性,用来存储从后端获取到的包含span标签的多条字符串数据。
2. 在模板中使用v-html指令渲染该数据属性,例如:
```html
<div v-html="content"></div>
```
3. 在CSS中定义一个类名,设置背景高亮的样式,例如:
```css
.highlight {
background-color: yellow;
}
```
4. 在mounted钩子函数中,使用JavaScript获取所有的span标签,并给它们添加上面定义的类名,例如:
```javascript
mounted() {
this.$nextTick(() => {
const spans = this.$el.querySelectorAll('span');
spans.forEach(span => span.classList.add('highlight'));
});
},
```
这样就可以实现将从后端获取到的多条字符串数据中的span标签背景高亮的效果了。不过需要注意的是,由于使用了v-html指令,可能存在XSS攻击的风险,需要对从后端获取到的数据进行严格的过滤和验证。
阅读全文