场景

若依前后端分离版手把手教你本地搭建环境并运行项目：

若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_前后端分离项目本地运行

Vue页面上某个弹窗内容是innerHTML动态拼接。

系统演示时需构造模拟数据，模拟出数据随机改变的效果。

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、给需要变化的元素添加span标签以及id属性

                                    self.content.innerHTML = `
车速:${content.carSpeed ? content.carSpeed : ""}km/h
水温:${content.wt ? content.wt : ""}℃
转速:${content.rotationRate ? content.rotationRate : ""}转/分
排温:${content.et ? content.et : ""}℃
里程:${content.mileage ? content.mileage : ""}km
甲烷浓度:${content.fc ? content.fc : ""}%
`;

2、在mounted方法中添加定时器，构造模拟数据

        //创建模拟数据定时器var mockInterval =  setInterval(() => {if(document.getElementById("carSiteSpan")){document.getElementById("carSiteSpan").innerHTML = "距离"+(Math.random() * (1000-600+1) + 600).toFixed(2)+"米";}if(document.getElementById("carSpeedSpan")){document.getElementById("carSpeedSpan").innerHTML = Math.ceil(Math.random() * (60-30+1) + 30);}if(document.getElementById("wtSpan")){document.getElementById("wtSpan").innerHTML = Math.ceil(Math.random() * (100-50+1) + 50);}if(document.getElementById("rotationRateSpan")){document.getElementById("rotationRateSpan").innerHTML = Math.ceil((Math.random() * (3000-1000+1) + 1000));}if(document.getElementById("etSpan")){document.getElementById("etSpan").innerHTML = Math.ceil((Math.random() * (60-30+1) + 30));}if(document.getElementById("mileageSpan")){document.getElementById("mileageSpan").innerHTML = Math.ceil((Math.random() * (50000-49800+1) + 49800));}if(document.getElementById("fcSpan")){document.getElementById("fcSpan").innerHTML = (Math.random()).toFixed(2);}},3000);

注意:

通过id获取元素，并设置innerHTML内容

Math.ceil(Math.random() * (60-30+1) + 30)   设置随机数在30 到 60之间并取整

(Math.random() * (1000-600+1) + 600).toFixed(2)  设置随机数在600 到1000之间并保留2位小数。

 3、监听当前页面显示状态，当页面被销毁时，销毁定时器

同样在mounted中

        // 监听当前页面 显示状态window.addEventListener('visibilitychange', this.handleVisibilityChange);// 当页面被销毁时 移除监听this.$on('hook:beforeDestroy', () => {console.info('销毁mockInterval定时器');clearInterval(mockInterval);})