uni-app换行符\n及空格渲染问题

最新推荐文章于 2025-02-18 13:52:48 发布

静静小白

最新推荐文章于 2025-02-18 13:52:48 发布

阅读量1.7w

点赞数 14

分类专栏： uni学习整理

本文链接：https://blog.csdn.net/qq_43628158/article/details/115668219

版权

uni学习整理专栏收录该内容

12 篇文章

订阅专栏

本文档介绍了在Vue中遇到的文本渲染问题，包括v-text渲染无效和父组件向子组件传值时空格被合并的解决办法。提供了解决方案，如使用v-html（不适用于小程序）、添加white-space样式属性，以及使用 来保留空格。同时，文章还展示了在子组件中如何处理这些情况的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、v-text渲染\n没效果解决方案
方法一：使用v-html（不建议，因为小程序不支持v-html，如果不考虑小程序，可以使用）
方法二：对css增加white-space:pre-wrap;

<template>
<view class="page_bar">
   <view v-text="msg" style="white-space:pre-wrap;"></view>
</view>
</template>
<script>
export default {
data(){
		return {
			msg:'第一行\n第二行'
		}
	}
}
</script>
<style scoped>
</style>

2、父组件向子组件传值，多个空格被合并为1个空格解决方法
方法一：子组件使用v-text渲染接收值，子组件标签增加white-space:pre-wrap;样式设置，父组件使用空格键表示空格，而非
方法二：子组件使用v-html渲染接收值，父组件传递值使用表示空格

/* 父组件 */
<template>
<view class="page_bar">
   <child title='标    题'></child>
</view>
</template>
<script>
import child from '../../components/child.vue';
export default {
    components:{
		child
	},
	data(){
		return {
		}
	}
}
</script>
<style scoped>
</style>

/*子组件 插值表达式或v-text渲染都可*/
<template>
<view class="page_bar">
<view style="white-space: pre-wrap;">{{title}}</view>
<view style="white-space: pre-wrap;" v-text="title"></view>
</view>
</template>

/* 父组件 */
<template>
<view class="page_bar">
   <child title='标&nbsp;&nbsp;&nbsp;题'></child>
</view>
</template>
<script>
import child from '../../components/child.vue';
export default {
    components:{
		child
	},
	data(){
		return {
		}
	}
}
</script>
<style scoped>
</style>

/*子组件 插值表达式或v-html，同样小程序可能不支持*/
<template>
<view class="page_bar">
<view v-html="title"></view>
</view>
</template>