如何在 vue 上使用 v-html? [英] How can I use v-html on the vue?

问题描述

我是这样尝试的:

<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，但它不起作用.每个单词应该有一个新行

I have used v-html, but that doesn't work. there should be a new line for each word

我该如何解决这个问题?

How can I solve this problem?

推荐答案

你需要直接替换↵，你可以通过:

You need to literally replace ↵, you can do it by:

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

沙盒

这篇关于如何在 vue 上使用 v-html?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！