집 >웹 프론트엔드 >JS 튜토리얼 >vue에서 원본 HTML을 출력하는 방법은 무엇입니까?

vue에서 원본 HTML을 출력하는 방법은 무엇입니까?

亚连원래의: 2018-06-11 14:46:335926검색

이 글에서는 보간된 텍스트를 구현하고 원본 HTML을 출력하는 웹 프런트엔드 Vue를 주로 소개합니다. 이제 이를 공유하고 참고용으로 제공합니다.

Vue.js는 HTML 기반 템플릿 구문을 사용하므로 개발자는 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있습니다. 모든 Vue.js 템플릿은 합법적인 HTML이므로 사양을 따르는 브라우저와 HTML 파서로 구문 분석할 수 있습니다.

vue에서 가장 일반적인 데이터 바인딩은 "Mustache" 구문(이중 중괄호)을 사용한 텍스트 보간입니다.

<span>Message: {{ value }}</span> // 插值文本

바인딩된 데이터 개체의 값 속성이 변경될 때마다 페이지는 다시 렌더링합니다.

또는 때로는 한 번만 업데이트하고 싶고 매번 데이터를 업데이트하고 페이지를 다시 렌더링하고 싶지 않은 경우 v-once 명령을 사용하여 일회성 업데이트를 수행할 수도 있습니다.

<span v-once>这个将不会改变: {{ value }}</span> 
// value的值改变了一次后，第二次改变时就不会再重新渲染页面

가끔 단일 텍스트 이상을 삽입하는 경우, 예를 들어 서식 있는 텍스트 값에는 다양한 텍스트 값과 다양한 원본 HTML 태그가 포함되어 있습니다. 페이지에 완전히 표시하려면 v-html 명령을 사용해야 합니다.

<template>
 <p v-html="htmlvalue"></p> // 调用显示富文本，将会按照原始的html显示
</template>
<script>
export default {
 data(){
 return{
  htmlvalue: &#39;<span style="color:red;">the should be red</span>&#39; // 比如：这是一个富文本的值
 }
 }
}
</script>

참고 : 귀하의 사이트에서 동적으로 렌더링된 임의의 HTML은 XSS 공격으로 쉽게 이어질 수 있으므로 매우 위험할 수 있습니다. 신뢰할 수 있는 콘텐츠에만 HTML 보간을 사용하고 사용자 제공 콘텐츠에는 절대 사용하지 마세요.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

vue에서 원본 HTML을 출력하는 방법은 무엇입니까?

관련 기사