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

Question

每當 Vue 中有 ↵ 時，我想渲染一個換行符。

我關注了如何在 vue 上使用 v-html？ 但我無法跟隨。

我試過的：

 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>