Vue.js 自动转换 HTML 和 Unicode 实体

Question

我正在使用开放的 Google Books API 构建一个简单的图书浏览应用程序。问题是在 API 响应中，有引号和 unicode 实体。现在，在呈现时，Vue.js 将引号转换为 HTML 实体，并且在将 unicode 转换回文本时，它不会在应有的位置应用 HTML 标记。让我举个例子:

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 ...

上面的文本(来自原始 API 响应)被转换成这样:

您可以看到 <b>标签保持不变。我能理解这一点，因为肯定已经完成了一次解码(从 Unicode 到 HTML)，但我怎样才能真正解释和应用 HTML？

这是另一个示例，我想将引号代码转换为实际的引号，但没有成功:

原始 API 响应:

ABOUT THE AUTHOR Benedict Anderson is one of the world'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>

Answer 1

也许你可以使用v-html

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