在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 相关文章推荐
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
微信小程序实现简单购物车功能
Dec 30 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
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
python自动格式化json文件的方法
2015/03/11 Python
python自动化报告的输出用例详解
2018/05/30 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python递归全排列实现方法
2018/08/18 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
详解Django配置优化方法
2019/11/18 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
浅谈Python 函数式编程
2020/06/20 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
个人对照检查材料
2014/02/12 职场文书
质量主管工作职责
2014/09/26 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python