Vue中的文字换行问题
更新时间：2022年09月13日 10:54:55 作者：Boriska1996
这篇文章主要介绍了Vue中的文字换行问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue中数据单向绑定的文字换行怎么搞？
两个关键 /n+white-space: pre-wrap;
换行样式绑定给需要换行的父元素
Vue文本中的\n 、＜br＞进行换行显示
效果图
1.br换行可以使用v-html
<p v-html="info"></p>
data() {
return {
activeName: 'first',
info: '1、优化批量上传图片<br/>2、优化时间'
}
},2.\n 换行
<p style="white-space: pre-wrap;">{{ info }}</p>
data() {
return {
info: '1、优化图片\n2、优化时间\n'
}
},3.把br替换成\n换行
<p style="white-space: pre-wrap;">{{changeLine(info)}}</p>
data(){
return{
info: '1、优化批量上传图片<br/>2、优化时间'
}
},
methods:{
changeLine(str){
return str.replace(/<br>/g,'\n')
}
}补充：点击查看详细解释 white-space
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 实现弹窗关闭后刷新效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了uni-app 的模板语法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要为大家详细介绍了vue3配置代理实现axios请求本地接口返回PG库数据的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2025-03-03
这篇文章主要给大家介绍了关于vue导出报表至excel表格的三种方式,导出报表是实际开发的常见功能,前后端都可以实现表格导出,本文介绍的是用vue实现,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了<el-button>点击后如何跳转指定url链接问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue之关于Eslint自动加分号的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了Vue自定义指令详解,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了关于TypeScript的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最近需要做一个el-table的表格,表头需要显示提示信息,本文主要介绍了ElementUI中el-table表格组件如何自定义表头,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
这篇文章主要为大家介绍了Vue之生命周期函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
最新评论