vue引用js html页面 vue引用js动态效果

要引用的index.html页面：（资源来自网络）在pubilc下建一个static文件放入js文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>数字翻转</title><meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport" /><style>body {min-height: 60vh;background: #333333;display: flex;justify-content: center;align-items: center;}.content {display: flex;justify-content: flex-start;align-items: center;}.content-item {width: 36px;height: 40px;text-align: center;line-height: 40px;font-size: 22px;font-family: PangMenZhengDao;font-weight: bold;color: #12F6FE;background: rgba(11, 51, 107, 0);border: 1px solid #00FFF6;}.content-item+.content-item {margin-left: 4px;}</style><link rel="stylesheet" href="./rollNumber/index.css">
</head><body><div id="rollNumberList" class="content"><div class="content-item">0</div><div class="content-item">0</div><div class="content-item">0</div><div class="content-item">0</div><div class="content-item">0</div><div class="content-item">0</div><div class="content-item">0</div><div class="content-item">0</div></div><script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="./rollNumber/index.js"></script><script>let num = 300let update = $("#rollNumberList").rollNumber({ num })setInterval(() => {update(num += Math.floor(Math.random() * (4000 - 3000) + 3000))}, 3000)</script>
</body></html>

vue页面：运行项目打开此路径就可以看到效果了

<template><div class="echarts"><iframe :src="src1" frameborder="0" style="width:100%;height:100vh"></iframe></div>
</template>
<script>
export default {data() {return {src1: "/static/index.html",};}
};
</script>
<style rel="stylesheet/scss" lang="scss">.echarts{position: absolute;height: 100vh;width: 100%;}
</style>