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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐