vue2中填空题遍历本题标题需要将标题富文本中所有的_下划线替换成input输入框,并且获取绑定input值
时间: 2024-03-26 20:41:06 浏览: 127
在Vue2中,可以使用v-html指令将富文本内容渲染到页面上,并使用正则表达式来替换下划线为input输入框。在替换下划线时,可以将每个填空题的答案绑定到对应的input输入框上,方便后续处理。
示例代码如下:
```vue
<template>
<div>
<div v-html="questionTitle"></div>
<div v-for="(answer, index) in answers" :key="index">
<input type="text" v-model="answer.value">
</div>
</div>
</template>
<script>
export default {
data() {
return {
questionTitle: '<p>这是一个填空题,下划线中的内容需要填写<input type="text">。</p><p>另一个下划线中的内容需要填写<input type="text">。</p>',
answers: [
{ value: '' },
{ value: '' }
]
}
},
mounted() {
this.replaceUnderline();
},
methods: {
replaceUnderline() {
const regex = /_(.*?)_/g;
const el = this.$el;
const matches = el.innerHTML.matchAll(regex);
for (const match of matches) {
const input = document.createElement('input');
input.type = 'text';
input.value = this.answers[0].value;
input.addEventListener('input', (event) => {
this.answers[0].value = event.target.value;
});
const range = document.createRange();
range.setStart(match.index + el.firstChild.length, 0);
range.setEnd(match.index + match[0].length + el.firstChild.length, 0);
range.deleteContents();
range.insertNode(input);
}
}
}
}
</script>
```
在上述代码中,使用v-html指令将填空题的标题渲染到页面上,然后在mounted生命周期钩子中调用replaceUnderline方法,该方法通过正则表达式匹配下划线,然后使用createElement方法创建input输入框,并将填空题的答案绑定到input的value属性上,最后使用Range对象替换下划线为input输入框。在input输入框的input事件中,更新对应填空题的答案。
阅读全文