js获取div的id_用Vue.js写一个动态获取水文站降雨量的例子-CSDN博客

-----聊摄影谈技术不老的攻城狮-----

这几天防汛，关注降雨量的朋友很多，有人需要自动抓取相关水文数据到自己的网页或者APP，可以采用类似的方法。为了说明原来，就用vue.js写一个获取芜湖水文站信息的简单代码，与大家分享如下：

页面头部添加vue.js和ajax请求包文件：

<script src="https://cdn.jsdelivr.net/npm/vue">script> <script src="axios.min.js">script>

页面添加：

<div id="yuqing">    <p>近期雨晴 p><ul v-for="mz in yudata">      <li>{{mz.STCD}}、{{mz.XIAN}}{{mz.STNM}}监测站，雨量：{{mz.DAYRAIN}}li>ul>div>

获取芜湖水文站数据：

var day1 = new Date();var time = getNowFormatDate();var shuiwenurl='http://www.whswj.net/ahwater/whshqxx/BusinessHandler.ashx?name=SelectToDayRainBriefing&moduleid=146&time='+time; function getNowFormatDate() {        var date = new Date();         var year = date.getFullYear();        var month = date.getMonth() + 1;        var strDate = date.getDate();        if (month >= 1 && month <= 9) {            month = "0" + month;        }        if (strDate >= 0 && strDate <= 9) {            strDate = "0" + strDate;        }    var hour = date.getHours();    if (hour >= 0 && hour <= 9) {            hour = "0" + hour;        }        var currentdate = year + month + strDate +hour+'00';        return currentdate;    }      var app2 = new Vue({  el: '#app-2',  data: {  yudata:[]  },  methods: {  getYuqing:function(){     var a=axios.get(shuiwenurl).then(function(response) {       return response.data;        });    a.then(res=>{this.yudata=res;});    } }});