在vue中动态生成元素(或vue中的自定义标签)?

  • Z时代
  • 2024-02-08
  • 分类：IT

在vue中动态生成元素(或vue中的自定义标签)?

问题描述

在vue中动态生成元素(或vue中的自定义标签)

有这样一个需求:
把这样的数据:

abcdefg\nhijklmn\nopqrst https://example.com uvwxyz\n[img]https://example.com/favicon.jpg[/img]123456789

变成这样: (为提高可读性已换行)

abcdefg<br/>
hijklmn<br/>
opqrst 
<a href="http://example.com">http://example.com</a>
uvwxyz<br/>
<img src="https://example.com/favicon.jpg" alt="https://example.com/favicon.jpg"/>
123456789

(其实js的replaceAll(正则) + vue的v-html就能实现, 但如果用到自定义标签(如el-image)就废了)
有什么更好的方法吗, 不直接操作dom那种(因为我要用到自定义标签(element-ui))?

相关代码

纯js版(即直接操作dom, 用不了vue自定义标签):

var div = document.getElementById("div");
var str = "abcdefg\nhijklmn\nopqrst https://example.com uvwxyz\n[img]https://example.com/favicon.jpg[\/img]123456789";
//URL的正则
var URLreg = /(?<!\[img\])(https:\/\/|http:\/\/)((\w|=|\?|\.|\/|&|-|#)+)(?!\[\/img\])/gim;
//[img]的正则
var IMGreg = /(\[img\])(https:\/\/)((\w|=|\?|\.|\/|&|-)+)(\[\/img\])/gim; 
//URL转超链接
str = str.replace(URLreg, '<a href="$1$2">$1$2</a>');
//[img]转图片
str = str.replace(IMGreg, '<img src="$2$3" alt="[img]$2$3[/img]"/>');
//换行
str = str.replaceAll('\n', '<br/>');
//显示到div
div.innerHTML = str;

你期待的结果是什么？

用vue实现这个功能(不自己操作dom);
可以用vue的自定义标签(如element-ui的el-image).


(注: 我是个刚学vue的小白(五天前刚学完vue2), 这玩意我已经想了好几天也没想出来怎么实现了, 如果实现方法很简单那轻喷ᓚᘏᗢ)

回答：

使用 vue 的话也需要先替换成标签格式。

使用 vue 当然要走 render 了，或者单纯的模板解析（需要 vue 全量包）。

以上是 在vue中动态生成元素(或vue中的自定义标签)? 的全部内容， 来源链接： utcz.com/p/937284.html

回到顶部