方法中的转义文本，而不是Vue中的方括号

Question

我遇到了这样一种情况：我有一个文本，它以我不想转义的 等字符开头，但随后我确实想转义字符串的其余部分。

在Vue中，给定text = "&nbsp;&nbsp;<strong>something</strong>"，如果我这样做：

<p>{{ text }}</p>

它转义所有文本，包括 ，打印出来：

&nbsp&nbsp<strong>一些<strong>

如果我这样做：

<p v-html="text"></p>

然后我得到：

某些东西

我想要实现的不是转义 ，而是转义html的所有其余部分。我的想法是这样做：

<p v-html="formatText()"></p>
<script>
methods: {
formatText() {
return '&nbsp;&nbsp;' + e('<strong>something</strong>');
}
}
</script>

其中CCD_ 5将是逃脱不期望的html的某个函数。

Vue有这样的方法吗？或者这是我必须写的东西？我不知道Vue是如何在引擎盖下逃跑的。

Answer 1

您可以在String.replace()方法的帮助下使用RegEx来实现这一点。

实时演示：

new Vue({
el: '#app',
data: {
text: '&nbsp;&nbsp;<strong>something</strong>'
},
mounted() {
this.text = this.text.replace(/[^&nbsp;].*/, '');
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p>{{ text }}</p>
</div>

Answer 2

所以我还没有找到Vue是否有办法在本地实现这一点的答案。但在此期间，我做了以下工作：

<p v-for="line in messageLines">
<span v-html="extractIndent(line)"></span>{{ line.trim() }}
</p>
<script>
methods: {
extractIndent(line) {
let indent = '';
for (let i = 0; i < line.length; i++) {
if (line.charAt(i) === ' ') {
indent += '&nbsp;';
} else {
break;
}
}
return indent;
}
}
</script>

这需要像"；缩进的文本"；并将空格转换为 ，并将它们放在未转义的<span>中，然后使用Vue的方括号转义文本的所有其余部分。

足够满足我现在的需求了。