Vue.js自動轉換HTML和Unicode實體

我正在使用開放的Google Books API構建一本簡單的圖書瀏覽應用程序。問題是，在API響應中，有引號和unicode實體。現在，在渲染時，Vue.js將引號轉換爲HTML實體，並且在將unicode轉換回文本時，它不會將HTML標籤應用於他們應該的位置。我給大家舉一個例子：Vue.js自動轉換HTML和Unicode實體

Pronunciation Guide for \u003cb\u003eElixir\u003c/b\u003e Aether: EE-ther Ananke: ah-NAN-key Agapi: ah-\u003cbr\u003e\nGAH-pee Apollyon: a-POL-ee-on Atropos: ah-TRO-poes Clothe: KL O-tho \u003cbr\u003e\nDaimon: DEE-mun Hematoi: HEM-a-toy Khalkotauroi: kal-koh-TOR-oy CHAPTER \u003cbr\u003e\n1 ALEX&nbsp;...

上面的文本（從原始API響應）被轉換成這樣：

你可以看到<b>標籤被原封不動。我可以理解這一點，因爲一次解碼已經完成（從Unicode到HTML），但我怎樣才能真正解釋和應用HTML？

下面是另一個例子，在這裏我想報價代碼轉換爲實際的引號，但它不會發生：

原始API響應：

ABOUT THE AUTHOR Benedict Anderson is one of the world&#39;s leading authorities on South East Asian nationalism and particularly on Indonesia.

渲染：

下面是我用我的組件的代碼（很簡單）：

<template> 
    <div class="book-listing"> 
     <div class="book-image"> 
      <img :src="book.volumeInfo.imageLinks.smallThumbnail"> 
     </div> 

     <div class="book-title"> 
      {{ book.volumeInfo.title }} 
     </div> 

     <div class="book-description"> 
      {{ book.searchInfo.textSnippet }} 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     props: [ 'book' ] 
    } 
</script>

來源

2017-10-15 dotslash

也許你可以使用V-HTML

<div class="book-title" v-html="book.volumeInfo.title">

來源

2017-10-16 01:33:09

謝謝！我以前看過'v-html'，但是因爲它認爲該屬性的存在會奇蹟般地轉換HTML，所以使用'

. . .

'。 – dotslash

是的。這就像角色的ng-bind-html，除了清理概念。 –

Vue.js自動轉換HTML和Unicode實體

回答

相關問題