如何将一段html代码动态插入到vue的dom上？

  • Z时代
  • 2024-03-12
  • 分类：IT

如何将一段html代码动态插入到vue的dom上？

我想将以下html代码动态插入到vue里：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Awesome go-echarts</title>
    <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
</head>
<body>
<div class="container">
    <div class="item" id="LHBhijIvJRRa" style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let goecharts_LHBhijIvJRRa = echarts.init(document.getElementById('LHBhijIvJRRa'), "white");
    let option_LHBhijIvJRRa = {"color":["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],"legend":{"show":false},"series":[{"name":"Category A","type":"bar","waveAnimation":false,"renderLabelForZeroData":false,"selectedMode":false,"animation":false,"data":[{"value":177},{"value":247},{"value":128},{"value":273},{"value":242},{"value":62},{"value":247}]},{"name":"Category B","type":"bar","waveAnimation":false,"renderLabelForZeroData":false,"selectedMode":false,"animation":false,"data":[{"value":187},{"value":279},{"value":124},{"value":159},{"value":214},{"value":63},{"value":111}]}],"title":{"text":"My first bar chart generated by go-echarts","subtext":"It's extremely easy to use, right?"},"tooltip":{"show":false},"xAxis":[{"data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}],"yAxis":[{}]};
    goecharts_LHBhijIvJRRa.setOption(option_LHBhijIvJRRa);
</script>
<style>
    .container {margin-top:30px; display: flex;justify-content: center;align-items: center;}
    .item {margin: auto;}
</style>
</body>
</html>

使用的是vue提供的 v-html, 其中options参数就是上面的html代码:

<template>
    <span v-html="options"></span>
</template>

现在问题是, 运行后显示一片空白，也没有报错。不知道是哪里出了问题

问一下各位大神，应该如何动态的插入一段html代码到vue3中运行啊

回答：

v-html原理是使用元素的innerHTML属性。
innerHTML属性不支持使用script标签。
可以将script单独引入，并通过eval执行额外的script代码

以上是 如何将一段html代码动态插入到vue的dom上？ 的全部内容， 来源链接： utcz.com/p/936191.html

回到顶部