v-html绑定提出标签之后的文本中包含转义字符 例如” 如何正确是显示
时间: 2024-10-13 16:14:02 浏览: 21
在Vue.js中,如果你使用`v-html`指令绑定的数据中含有HTML实体(如`”`),默认情况下,Vue会把这些字符当作安全内容处理,避免它们被执行作为HTML。如果你想在页面上显示原始的HTML实体,你需要开启模板的安全模式,通常通过设置`<template>`元素或者全局配置来实现。
1. **局部模板安全**:
```html
<div v-bind:html="unsafeContent"></div>
```
其中`unsafeContent`是一个计算属性,例如:
```javascript
computed: {
unsafeContent() {
return this.myString.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
}
}
```
2. **全局配置**:
在你的main.js文件中,可以设置`bailryaderOptions`:
```javascript
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.config.devtools = true // 如果是在开发环境
// 开启模板安全性
Vue.config.sanitize = false
new Vue({
render: h => h(App),
}).$mount('#app')
```
请注意,在实际应用中,仅当确保数据来源可信并且确实需要展示原生HTML时才应开启此功能,因为这可能会带来潜在的安全风险。
阅读全文