时间:2021-05-25
最近在开发的时候遇到这样一个需求,需要将一段文本按照分号(有中文分号和英文分号)进行换行操作。
如下:
换行前:雷军,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按分号将文本换行的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1.问题描述在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式。代码如下,div.article-context里面的图片修改成自
Vue为v-html中标签添加CSS样式{{news.title}}{{news.datetime}}返回列表当我们使用v-html渲染页面,使用下面这种方式去
问题2.0filtersonlyworkinmustachetagsandv-bind.Vue2.0不再支持在v-html中使用过滤器,比如在1.0中是这样使用
本文实例讲述了vue.js使用v-pre与v-html输出HTML操作。分享给大家供大家参考,具体如下:/vue/2.5.16/vue.min.js">{{这里
背景:后端返前端html格式的数据,前端用v-html解析渲染,如:,a标签能成功渲染,但其绑定的事件无法触发。原因:vue没有将其作为vue的模板解析渲染解决