如何在 VueJS 中渲染换行符↵？

Question

我想在 Vue 中有 ↵ 时渲染一个换行符。

我关注了How can I use v-html on the vue?，但我无法关注。

我尝试过的：

var app = new Vue({
  el: '#app',
  data() {
    return {
      a: {
        country: "England:↵ - Liverpool↵ - Chelsea↵ - Arsenal↵ - MU↵ - City",
      },
      testObj: "",
    };
  },
  computed: {
    jsonFunc() {
      return (this.testObj = this.a.country.replace(/↵/g, "<br/>"));
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    Vue
    {{ jsonFunc }}
  </div>
</div>

Answer 1

使用v-html 指令

<template>
  <div >
    Vue
    <span v-html='jsonFunc'></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: {
        country: "England:↵ - Liverpool↵ - Chelsea↵ - Arsenal↵ - MU↵ - City",
      },
      testObj: "",
    };
  },

  computed: {
    jsonFunc() {
      return (this.testObj = this.a.country.replace(/↵/g, "<br/>"));
    },
  },
};
</script>