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
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码
本文分别使用 SFC（模板方式）和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装，实现配置化的菜单，有了配置化的菜单，后续便可以根据路由动态渲染菜单，对Vue3 无限级菜单组件相关知识感兴趣的朋友一起看看吧2022-09-09
这篇文章主要为大家详细介绍了Vue左滑组件slider的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要为大家详细介绍了vue实现登录页背景粒子特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这个插件可以用来在未使用组件库,没有自带好的校验规则时使用,进行表单校验，非常的实用，感兴趣的朋友可以参考下本文，了解该插件的使用方法2021-06-06
Element-Ui组件 NavMenu 导航菜单的具体使用
这篇文章主要介绍了Element-Ui组件 NavMenu 导航菜单的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
在父组件内调用子组件内的事件从而改变子组件的某些状态,父子组件使用<script setup>语法糖,父组件通过给子组件定义ref访问其内部事件,本文给大家介绍了vue3 ref获取不到子组件的解决方法,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
启动项目时遇到ES6的拓展运算符报错可以通过切换到淘宝镜像,以及在项目根目录下新增.babelrc和postcss.config.js文件来解决,这些操作有助于正确配置项目环境,从而避免报错,并保证项目的顺利运行,希望这些经验能够帮助到遇到相同问题的开发者2024-10-10
在ElementUI中树形控件本身不支持单选功能,本文就来介绍一下如何实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
今天小编就为大家分享一篇Vue2.0点击切换类名改变样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论