如何在 vue 上使用 v-html？

Posted 2023-02-23

【中文标题】如何在 vue 上使用 v-html？

【英文标题】：How can I use v-html on the vue?

【发布时间】：2020-04-05 20:54:06

【问题描述】：

我尝试这样：

<template>
    ...
    <div v-html="test"></div>
    ...
</template>

<script>
export default 
  data: () => (
    test: null,
  ),
  mounted () 
    let a = country: "England:↵ - Liverpool↵ - Chelsea↵ - Arsenal↵ - MU↵ - City"
    this.test = a.country
  

</script>

结果：

England:↵ - Liverpool↵ - Chelsea↵ - Arsenal↵ - MU↵ - City

我用过v-html，但是不行。每个单词应该有一个新行

我该如何解决这个问题？

【问题讨论】：

你应该用<br>换行而不是↵

使用<pre> 标签或将style="white-space:pre-line" 添加到您的<div>。仅供参考，↵ 不是换行符。它实际上是一个小的直角箭头字形

@Ahmad Mobaraki json 是 API 的响应

@Phil 是的。但是来自API的数据json。我只是为了获取数据

↵ 不是 HTML

【参考方案1】：

你需要从字面上替换↵，你可以这样做：

let a = 
  country: "England:↵ - Liverpool↵ - Chelsea↵ - Arsenal↵ - MU↵ - City"
;
this.test = a.country.replace(/↵/g, '<br/>');

SANDBOX

【参考方案2】：

如果您使用的是降价，请尝试以下操作

<template>
    <div v-html="$options.filters.markhtml(test)"></div>
</template>

<script>
import marked from 'marked'
export default 
    data()
      return 
          test: null,
      
    ,
    mounted () 
        let a = country: "England: \n- Liverpool \n- Chelsea \n- Arsenal \n- MU \n- City"
        this.test = a.country
    ,
    filters: 
        markhtml: function (markdown) 
            if (typeof markdown !== 'undefined') 
                return marked(markdown)
            
                return null
        
    

</script>

您必须使用marked 并像在代码中显示的那样导入它。

下面是Working fiddle。希望我的回答对你有帮助

【讨论】：

你的代码 sn-p 说"Uncaught SyntaxError: Cannot use import statement outside a module"

【参考方案3】：

我们不能直接使用markdown字符。所以我们需要使用替换功能来用标签替换字符。

this.test = a.country.replace(/\u21B5/g,'<br/>')