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>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐