elementui this.$modal.confirm 添加动态的html语句
时间: 2024-05-10 16:19:39 浏览: 135
要在 Element UI 的 Modal 组件中添加动态的 HTML 语句,可以使用 `v-html` 指令来动态绑定 HTML。具体步骤如下:
1. 在 Modal 的主体内容中添加一个带有 `v-html` 指令的元素,例如:
```html
<template>
<div>
<el-button @click="showModal">打开 Modal</el-button>
<el-dialog :visible.sync="dialogVisible">
<div v-html="dynamicHtml"></div>
</el-dialog>
</div>
</template>
```
2. 在 Vue 实例中定义一个变量来保存需要动态绑定的 HTML 代码,例如:
```js
<script>
export default {
data() {
return {
dialogVisible: false,
dynamicHtml: '',
};
},
methods: {
showModal() {
this.dynamicHtml = '<p>这是动态绑定的 HTML 代码</p>';
this.dialogVisible = true;
},
},
};
</script>
```
这样,当 Modal 弹窗显示时,`v-html` 指令会将 `dynamicHtml` 变量中保存的 HTML 代码渲染到对应位置上。需要注意的是,由于 `v-html` 指令会将 HTML 解析为 DOM 元素,因此需要确保动态绑定的 HTML 代码是安全的,避免 XSS 攻击。
阅读全文