Vue에서 괄호 대신 메서드로 텍스트 이스케이프

이런 문자로 시작하는 텍스트가 있어요 도망치고 싶지 않지만 나머지 끈은 도망치고 싶어

Vue, 지정text = "&nbsp;&nbsp;<strong>something</strong>"할 경우:

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

이 명령어는 다음을 포함한 모든 텍스트를 생략합니다.&nbsp;, 출력:

&nbsp;&nbsp;<strong> 무엇인가 </strong>

이렇게 하면:

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

그 후, 다음과 같이 됩니다.

뭔가

내가 성취하고 싶은 것은 탈출하지 않는 것이다.&nbsp;HTML의 나머지 부분은 모두 빠져나갑니다.내 생각은 다음과 같았다.

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

어디에e원치 않는 html을 벗어나는 함수일 수 있습니다.

Vue에게 그런 방법이 있나요?아니면 제가 작성해야 하는 건가요?나는 Vue가 어떻게 후드 아래로 탈출하는지 잘 모르겠다.



질문에 대한 답변



다음을 사용하여 이를 달성할 수 있습니다.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>




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> 

이렇게 하면 ” 들여쓰기된 텍스트”와 같은 텍스트가 공백으로 변환됩니다.&nbsp;그리고 그것들을 그 안에 넣어요<span>이스케이프를 해제하고 Vue의 괄호를 사용하여 나머지 텍스트를 모두 이스케이프합니다.

지금 내가 필요한 건 충분해.