识别后端返回的字符串中携带的空格 以及换行 要在前端展示 v-html
1.直接使用v-html
<view v-html="formattedIssueDesc"></view>
2.由于直接使用 v-html
指令可能不会将 \n
解释为换行,所以就有第二种
<template>
<view v-html="formattedIssueDesc"></view>
</template>
<script>
export default {
data() {
return {
issueDesc: '后端返回字符串\n后端返回字符串\n后端返回字符串'
};
},
computed: {
formattedIssueDesc() {
return this.issueDesc.replace(/\n/g, '<br/>');
}
}
};
</script>
3.还有最后一种 使用 CSS white-space
属性:
通过设置 CSS 样式来保留文本中的空白符,包括换行符。但是,请注意,white-space: pre
会保留所有的空白符,包括空格和制表符,并且文本会以等宽字体显示。而 white-space: pre-line
会合并连续的空格,但保留换行符。
<template>
<view style="white-space: pre-line;">{{ issueDesc }}</view>
</template>
<script>
export default {
data() {
return {
issueDesc: '后端返回字符串\n后端返回字符串\n后端返回字符串',
};
}
};
</script>