IT이야기

구문 분석 방법구문 분석 방법VUE.js의 html 태그에 대한 문자열로VUE.js의 html 태그에 대한 문자열로

cyworld 2022. 5. 11. 22:06
반응형

구문 분석 방법
VUE.js의 html 태그에 대한 문자열로

Vue.js에서 {{}}}을 사용하여 데이터를 HTML로 렌더링하지만, 지금은 데이터에 문자열이 있고,
데이터를 렌더링할 때 해당 문자열의 태그를 HTML 태그로 구문 분석할 수 있다.

data(){
  return {
    bodyText: 'aaaaaa<br>aaaaaa'
}
}
<p>{{bodyText}}</p>

스팬 태그의 내용은 다음과 같다.

aaaaaa
aaaaaa

그러나 결과는 다음과 같다.aaaaaa<br>aaaaaa

다음을 사용하여 작동해야한다고 생각한다.

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

지시어 사용:

<p><span v-html="bodyText"></span></p>

p태그 자체로 사용함으로써 여전히 심플하게 만들 수 있다.

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

나의 예 html

<td>
    <span v-html="getInfo(item)"></span>
</td>

각본을 뜨다

getInfo: function (item) {
   return "One line<br />Next line"
}

참조URL: https://stackoverflow.com/questions/55614875/how-to-parse-br-in-a-string-to-html-tag-in-vue-js

반응형