分号的html文本,在Vue中利用v-HTML按分号将文本换行的例子_輕微

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

如下：

换行前：雷军,2457.66万,自然人股东;洪锋,169.51万,自然人股东;黎万强,10.33万,自然人股东;

换行后：

雷军,2457.66万,自然人股东;

洪锋,169.51万,自然人股东;

黎万强,10.33万,自然人股东;

显示的

methods:{

change:function(content){

content = content.replace(/;/g,";");

content = content.replace(/；/g,"；");

return content;

}

也可以这样写：

methods:{

change:function(content){

var reg = /[;；]/g;

content = content.replace(reg,"$&\r\n");

return content;

}

但是在写的过程中发现，控制台输出显示已经转换成功了，但是在页面上看到的效果是还没有转换成功。后来发现需要在页面上当前标签上加一个white-space: pre-wrap;的样式，如下：

至此问题得以解决。

以上这篇在开发者。

分号的html文本,在Vue中利用v-HTML按分号将文本换行的例子_輕微_前端开发者相关推荐

vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
html 全景图three,vue中利用three.js实现全景图的完整示例
粗暴一点,直接上代码: 第一步: 通过指令下载three.js npm install three -S 第二步: 在组件中引用 import * as THREE from 'three' 第三步: ...
Vue 中利用 template标签遍历多维数组
Vue 中利用 template标签遍历多维数组 1. 需求 2. 二维数组内容 3. 列表渲染指令 v-for 4. template 标签 5. 正确的做法作者:高玉涵时间:2022.7.20 ...
vue 中利用canvas 给pdf文件加水印---详细教程（附上完整代码）
需求:在h5网页中打开pdf文件,要求给文件添加水印实现技术及插件:vue,vue-pdf,canvas 插件安装: npm i vue-pdf --save npm i pdf-lib --sav ...
vue中利用gif.js实现GIF动图下载
前言 gif.js可以将帧图或者canvas拼成新的gif,gif.js没有npm install的库,引用方式如下: 1. 下载资源首先从官方仓库上下载代码,worker不能跨域,所以资源必然是放 ...
vue中利用scss实现整体换肤和字体大小设置
一.前言利用Sass预处理实现换肤和字体大小调整. 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制.页面初始化是的字体适配可以根据de ...
在VUE中利用MQTT协议实现即时通讯
前言建议先阅读: 在Node.js下运用MQTT协议实现即时通讯及离线推送以前尝试在vue中用上mqtt,了解到mqtt实质上是基于websocket进行数据通信,所以上文中在node下实现的服务 ...
vue中既可以选择又可以手动输入的文本框类型_在PPT中制作一个胖乎乎的可爱圆环图...
您好,欢迎来到[爆炒Office],这里有原创的实用办公软件技巧. 概述有的数据图是以精确的数据为基础制作而成,而有的数据图又是使用图形制作成的示意图.本文介绍使用弧形制作示意关系的圆环图,同时,通 ...

分号的html文本,在Vue中利用v-HTML按分号将文本换行的例子_輕微_前端开发者

分号的html文本,在Vue中利用v-HTML按分号将文本换行的例子_輕微_前端开发者相关推荐

最新文章

热门文章