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实体

回答

相关问题