极客观点
项目管理
HarmonyOS
我想将以下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代码