VUE-16 json格式的转换

一般我们从服务器拿到的数据是数组格式可以直接调用，但是当它是json格式的时候，我们要用转换一下再调用。

1.div：在数组里面指一个参数，再指一个参数。

 2.script，编写方法

 

 完整代码：

<template>
  <div>
    <div>
      <div>用户个人信息</div>
      <div>用户名称：{{ userData.name }}</div>
      <div>电话：{{ userData.phone }}</div>
      <div>余额：{{ userData.money }}</div>
    </div>
    <el-form label-width="150px" style="width: 600px">
      <el-form-item label="用户改名">
        <el-input v-model="name"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="success " @click="upName">提交修改</el-button>
    <div>我的订单</div>
    <div style="display:flex">
      <div style="flex:1">编号</div>
      <div style="flex:1">支付时间</div>
      <div style="flex:1">支付金额</div>
      <div style="flex:1">商品详情</div>
    </div>
    <div style="display:flex" v-for="(order,index) in orderList" :key="'order-' +index">
      <div style="flex:1">{{order.id}}</div>
      <div style="flex:1">{{order.payDate | filterTime}}</div>
      <div style="flex:1">{{order.payMoney}}</div>
      <div style="flex:1">
        <div v-for="(goods,index2) in order.orderInfoArr" :key="'goods-' +index2">
          {{goods.name}}*{{goods.num}} --￥: {{goods.price}}
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import myheader from "../../components/Header.vue";

export default {
  data() {
    return {
      userData: {}, //对象
      name: "",
      orderList: [],

       testData:[
        {name:"hello",id:1},
        {name:"world",id:2},
      ],
      testData2:"[{name:\"hello\",id:1},{name:\"world\",id:2},]",
    
    };
  },
  created() {
    this.loadUserInfo();
    this.loadOrderInfos();

  },
  filters:{
    filterTime(val){//获取数据
    let d = new Date(val);//赋值
    return formatDate(d,"yyyy年MM月dd日");//转化成时间的格式
    },
 
  },
  methods: {
       loadOrderInfos() {//josn格式的转换
      var that = this;
      this.axios
        .get(`/order/listOrder`, {
          headers: {
            token: that.common.token,
          },
        })
        .then(function (response) {
          console.log(response);
          that.orderList = response.data.data;

          for(let order of that.orderList){
            order.orderInfoArr = JSON.parse( order.orderInfos );
          }

          console.log(that.orderList);

        });
    },
    loadUserInfo() {
      var that = this; //方便指对象
      this.axios //axios接口的调用，传送已经修改好的数据信息
        .get(`/user/loadUserInfo/`, {
          headers: {
            token: that.common.token, //根据接口要求，填写要传的参数
          },
        })
        .then(function (response) {
          console.log(response); //在控制台输出接收到的信息，response是从服务器接收到的信息，自定义的名字
          that.userData = response.data.data; //5执行列表的循环输出
        });
    },
    upName() {
      // 传送接收到的信息到服务器
      var that = this; //方便指对象
      this.axios
        .post(
          `/user/changeName/ ${this.name}`,
          {},
          {
            headers: { token: that.common.token },
            // axios调取接口获取功能，然后根据接口要求返回的参数
          }
        )
        .then(function (response) {
          console.log(response);
          alert("改名成功！");
          that.loadUserInfo();
        });
    },
    components: {
      myheader,
    },
  },
};
</script>

<style>
</style>