[英]How to render line-break ↵ in VueJS?
每当 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>
使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.