Vue项目中得到数据并且渲染到html页面上

简介: Vue项目中得到数据并且渲染到html页面上

第一步


<tr><td style=" width: 20%;font-weight:bold;text-align:left;">ΔX:</td>
      <td :title="basedata" style="text-align:left;width:45%;word-break:keep-all;white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis;">{{basedata[0].createDate}}</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">ΔY:</td>

首先是上面这段代码,下面是取数据



初始化


data() {
    return {
     basedata:[{
            "X": 0,
            "Y": 0,
            "Z": 0,
            "createDate": "1"}],//条件封装对象
    };
  },

方法

mounted() {
    this.loadMap();
    // this.orientClick();
    window.openshow=this.openshow;
    window.opendata=this.opendata;
    window.openwarn=this.openwarn;
    window.orientClick=this.orientClick;
  },


关键代码


methods: {
 loadMap () {
            //标注中的
             var qs = require('qs');
      // 传递参数
      axios.post("/seata",qs.stringify({     
        "id":1,
        "beginDate":"2019-04-26 10:00:00",
        "endDate":"2021-04-21 10:00:00",
        "version":3,
        "sign":"07a36e4"}))
        .then((response) => {
          this.basedata=response.data.basedata;
          // this.membe## 标题rList = response.data.data;
        })         
  },


关键代码


可以在页面中看到已经渲染上了



新创建一个公众号 Rockey小何同学 想相互交流的同学可以关注一下哈! 感谢支持!

相关文章
|
10天前
使用HTML编写注册页面
使用HTML编写注册页面
|
29天前
|
XML 前端开发 数据格式
请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
【2月更文挑战第22天】【2月更文挑战第67篇】请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
|
1月前
|
数据采集 前端开发 JavaScript
html 页面里 noscript 标签的作用介绍
html 页面里 noscript 标签的作用介绍
25 0
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
1天前
|
JavaScript
Vue 路由切换时页面刷新页面重新渲染
在Vue中,路由切换并不自动重新渲染页面,这可能导致传递参数到子组件时出现问题。使用`this.$route.replace(&#39;地址&#39;)`或`this.$route.push({name:&#39;地址&#39;,params:{key:value}})`进行跳转,但子组件不会响应变化。为解决此问题,需监听`$route`对象的变化,如图所示,通过`watch: {$route}`确保页面更新。
|
5天前
|
JavaScript
Vue 静态渲染 v-pre
Vue 静态渲染 v-pre
|
5天前
|
JavaScript
vue多条数据渲染(带图片)
vue多条数据渲染(带图片)
12 1
|
24天前
六个好看实用的html简单登录页面源码
六个好看实用的html简单登录页面源码
17 0
六个好看实用的html简单登录页面源码
|
24天前
响应式个人二维码收款HTML页面源码
响应式个人二维码收款HTML页面源码
13 0
响应式个人二维码收款HTML页面源码
|
24天前
|
XML Java 数据格式
springboot 微服务项目如何集成 html 页面
springboot 微服务项目如何集成 html 页面
26 0