在vue中利用v-html按分号将文本换行的例子
更新时间：2019年11月14日 10:57:36 作者：米斯特虞
今天小编就为大家分享一篇在vue中利用v-html按分号将文本换行的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近在开发的时候遇到这样一个需求，需要将一段文本按照分号(有中文分号和英文分号)进行换行操作。
如下：
换行前：雷军,2457.66万,自然人股东;洪锋,169.51万,自然人股东;黎万强,10.33万,自然人股东;
换行后：
雷军,2457.66万,自然人股东;
洪锋,169.51万,自然人股东;
黎万强,10.33万,自然人股东;
显示的html：
<p class="bgnr-txt" v-html="change(content)">
js：
methods:{
change:function(content){
content = content.replace(/;/g,";</br>");
content = content.replace(/；/g,"；</br>");
return content;
}
},
也可以这样写：
methods:{
change:function(content){
var reg = /[;；]/g;
content = content.replace(reg,"$&\r\n");
return content;
}
},
但是在写的过程中发现，控制台输出显示已经转换成功了，但是在页面上看到的效果是还没有转换成功。后来发现需要在页面上当前标签上加一个white-space: pre-wrap;的样式，如下：
<p class="bgnr-txt" style="white-space: pre-wrap;" v-html="change(content)">
至此问题得以解决。
以上这篇在vue中利用v-html按分号将文本换行的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了Vue脚手架配置代理服务器的两种方式(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
懒加载是一种网页优化技术，也被称为延迟加载，它的主要目的是在网页加载时，只加载当前可见区域内的内容，而延迟加载其他不可见区域的内容，从而提高网页的加载速度和性能，这篇文章主要介绍了vue图片懒加载的两种方法,需要的朋友可以参考下2023-07-07
路由懒加载是一项关键技术,它可以帮助我们提高Web应用的加载速度,本文主要介绍了React和Vue实现路由懒加载的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
vue3利用v-model实现父子组件之间数据同步的代码详解
在Vue 3中,v-model这一指令也得到了升级,使得父子组件之间的数据同步变得更加容易和灵活,本文将探讨一下Vue 3中如何利用v-model来实现父子组件之间的数据同步,需要的朋友可以参考下2024-03-03
本篇文章主要介绍了深入理解Vue 的条件渲染和列表渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
路由拦截是一种在用户访问特定页面之前对其进行拦截和处理的机制,下面这篇文章主要给大家介绍了关于vue前端img访问鉴权后端进行拦截的相关资料,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue.js绑定事件监听器的方法,结合实例形式分析了vue.js基于v-on事件绑定响应鼠标点击相关操作技巧,需要的朋友可以参考下2018-07-07
本文主要实现给项目的整个背景加上自定义水印，可以改变水印的文案和字体颜色等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了关于Pinia状态持久化问题，具有很好的参考价值，希望对大家有所帮助。2023-03-03
这篇文章主要介绍了vue3中如何使用ts，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论