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

이 글에서는 보간된 텍스트를 구현하고 원본 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 보간을 사용하고 사용자 제공 콘텐츠에는 절대 사용하지 마세요.

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

관련 기사:

WeChat 애플릿을 사용하여 MUI 번호 입력 상자 효과를 얻는 방법

WeChat 애플릿에서 접이식 패널을 구현하는 방법

WeChat에서 갤러리 슬라이더 구성 요소를 사용하는 방법 applet

Vue의 렌더링 기능 기본 사용법(상세 튜토리얼)

스크롤 뷰 컴포넌트를 사용하여 WeChat 애플릿에서 스크롤 애니메이션을 구현하는 방법

WeChat 애플릿의 체크박스 컴포넌트 사용에 대해

JavaScript에서 다각형 중심을 계산하는 방법

WeChat 애플릿에서 스위치 선택기를 사용하는 방법

위 내용은 vue에서 원본 HTML을 출력하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!