반응형
구문 분석 방법
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
반응형
'IT이야기' 카테고리의 다른 글
vuex와 vue-router를 사용하여 백엔드와 프런트엔드 사이의 상태를 동기화하는 방법 (0) | 2022.05.11 |
---|---|
인덱스에서 스플라이싱되지 않은 스플라이스는? (0) | 2022.05.11 |
maven 종속성이 501 오류로 인해 실패함 (0) | 2022.05.11 |
정적 메서드는 Java에서 상속되는가? (0) | 2022.05.11 |
구성 요소의 Vuex (0) | 2022.05.10 |