Vue.js에서 이스케이프되지 않은 HTML 표시

Vue.js에서 이스케이프되지 않은 HTML 표시

어떻게 하면 HTML을 콧수염 바인딩으로 해석할 수 있을까?그 순간 휴식 ()<br />)은 그냥 표시/표시된다.

소형 Vue 앱:

var logapp = new Vue({
  el: '#logapp',
  data: {
    title: 'Logs',
    logs: [
      { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1  },
      { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1  }
    ]
  }
})

그리고 여기 템플릿이 있다.

<div id="logapp">    
    <table>
        <tbody>
            <tr v-repeat="logs">
                <td>{{fail}}</td>
                <td>{{type}}</td>
                <td>{{description}}</td>
                <td>{{stamp}}</td>
                <td>{{id}}</td>
            </tr>
        </tbody>
    </table>
</div>

지시 v-html을 사용하여 표시할 수 있다.다음과 같은 경우:

<td v-html="desc"></td>

Vue2부터, 3중 교정기는 더 이상 사용되지 않으며, 당신은 사용해야 한다.v-html.

<div v-html="task.html_content"> </div>

문서 링크에서 우리가 내부에 무엇을 배치해야 하는지 명확하지 않다.v-html, 당신의 변수는 안으로 들어간다.v-html.

또,v-html와만 통하다<div>또는<span>에 대해서는 그렇지 않다.<template>.

앱에서 라이브를 보려면 여기를 클릭하십시오.

여기서 그것을 읽을 수 있다.

사용한다면

{{<br />}}

탈출할 수 있을 거야원시 html을 원한다면

{{{<br />}}}

EDIT(2017년 2월 5일):@hitautodestruct가 지적하듯이 vue 2에서는 트리플 컬브 교정기 대신 v-html을 사용해야 한다.

vue 구성 요소 내에서 html 콘텐츠를 표시하려면 v-html 지시어를 사용해야 함

<div v-html="html content data property"></div>

기본적으로 v-html 명령을 사용하여 표시하면 문자열 변수에 대해 일반적인 콧수염 바인딩을 사용하는 대신 요소 자체에 바인딩하십시오.

따라서 구체적인 예제를 위해서는 다음이 필요할 것이다.

<div id="logapp">    
    <table>
        <tbody>
            <tr v-repeat="logs">
                <td v-html="fail"></td>
                <td v-html="type"></td>
                <td v-html="description"></td>
                <td v-html="stamp"></td>
                <td v-html="id"></td>
            </tr>
        </tbody>
    </table>
</div>

사용 전v-html사용자 입력을 허용할 경우 탈출하는 요소를 소독해야 하며 그렇지 않을 경우 앱을 xss 취약성에 노출해야 한다.

자세한 내용은 https://vuejs.org/v2/guide/security.html를 참조하십시오.

나는 너에게 그것을 사용하는 대신에 적극 권장한다.v-html이 npm 패키지를 사용하려면

참조URL: https://stackoverflow.com/questions/30877491/display-unescaped-html-in-vue-js