uni-app换行符\n及空格渲染问题
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;"><
·
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='标 题'></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>
更多推荐
已为社区贡献2条内容
所有评论(0)