[Nuxt.js] 동적 포함 텍스트 줄 바꿈

스타일 설정

스타일white-space: pre-wrap;에서 설정하면 줄 바꿈\n에서 줄을 바꿉니다.

<div style="white-space: pre-wrap;" v-text="hoge" />

<script>
export default {
  data () {
    return {
      hoge: '改行したい\nテキスト'
    }
  }
}

상기에서 Mustache 문법{{}}을 사용하지 않고 v-text 속성을 사용한 이유는 다음과 같다.

탭 사이의 들여쓰기와 줄 바꿈도 출력합니다.

(ESLight를 가져온 경우) 태그 사이의 모든 내용을 계속 쓰면 한 줄이 너무 길어서 줄을 바꾸어 기술하는 Warning을 보낼 때가 있다.

<!-- 1. -->
<div style="white-space: pre-wrap;">
  {{ hoge }}
</div>

<!-- 2. -->
<div style="white-space: pre-wrap;">{{ hoge }}</div>

v-in(추천하지 않음)

다음과 같이 변수를 v-in 속성에 바인딩하면 일반 텍스트 대신 HTML로 표시됩니다.문자열에 <br>을 추가하면 HTML의 줄 바꿈 태그로 인식되고 줄이 바뀝니다.

<!-- タグ間にテキストを書かないので閉じタグの省略形で記述可能 -->
<div v-html="hoge" />

<script>
export default {
  data () {
    return {
      hoge: '改行したい<br>テキスト'
    }
  }
}
</script>

ESLin을 도입할 때 아래 Warning을 출력한다.(오류가 아니기 때문에 동작에 영향을 주지 않습니다.)

warning  'v-html' directive can lead to XSS attack  vue/no-v-html

사용자의 입력 값이 여기에 연결되면 교차 선별(입력 형식에서 악성 스크립트를 삽입하는 공격)의 위험이 있음을 지적합니다. 걱정하지 않으시면 기술<!-- eslint-disable-next-line -->을 기술하고 대상 줄에warning을 표시하지 마십시오.

<!-- eslint-disable-next-line -->
<div v-html="hoge" />