在vue中利用v-html按分号将文本换行的例子


Posted in Javascript onNovember 14, 2019

最近在开发的时候遇到这样一个需求,需要将一段文本按照分号(有中文分号和英文分号)进行换行操作。

如下:

换行前:雷军,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按分号将文本换行的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 #Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 #Javascript
用Node写一条配置环境的指令
Nov 14 #Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 #Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 #Javascript
Jquery让form表单异步提交代码实现
Nov 14 #jQuery
vue之延时刷新实例
Nov 14 #Javascript
You might like
Wordpress php 分页代码
2009/10/21 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
Element Input组件分析小结
2018/10/11 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
python里对list中的整数求平均并排序
2014/09/12 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
什么是serialVersionUID
2016/03/04 面试题
初中生期末考试的自我评价
2013/12/17 职场文书
图书室管理制度
2014/01/19 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
聘用意向书
2014/07/29 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
python如何在word中存储本地图片
2021/04/07 Python
JavaScript实现班级抽签小程序
2021/05/19 Javascript