vue 发送 axios 请求后台接口并绑定数据,动态加载

最新推荐文章于 2022-09-17 18:19:10 发布

原创最新推荐文章于 2022-09-17 18:19:10 发布 · 4.3k 阅读

CC 4.0 BY-SA版权

本文介绍了如何在Vue中使用axios发送请求获取后台接口数据，并将数据动态绑定到模板上。主要步骤包括在template中声明变量，data选项中定义初始数据，创建加载数据的方法，以及在methods中定义axios请求，通过res.data获取接口返回值，并将其绑定到视图上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先在template标签里面命名{{ msg }} 变量名(模板语法)

<template>
  <div>
    <div class="t3">1111{{ msg }}
      <p>
        <input type="text" v-model="detail">
      </p>
      <p>展示:{{detail}}</p>

      <li v-for="(key, value, index) in objs">
        {{'展示v-for遍历:'+ index }}-{{key}}-{{value}}
      </li>
    </div>
  </div>
</template>

2.第二步在<script>标签下,data () { return{ datalist: 'res.data' } }

<script>
  export default {
    name: 't3',
    data () {
      return {
        datalist: 'res.data',
        msg: '',
        detail: ''
      }
    },

3.在<script>标签下,创造时加载数据方法

 created () {
      this.getData()
    },

4.在<script>标签下,定义methods:{},里面getData(){ } 去发起axios请求后台数据,返回res.data,
res.data.bpi.EUR.XXXX 取出对应模板的值, 最后用this.模板名 = 取出的值,就绑定后台接口成功!

    methods: {
      getData () {
        var url = 'https://api.coindesk.com/v1/bpi/currentprice.json'

     // 配置url参数
        var params = {
          // dataType: 'YEAR',
          // user_id: '123'
        }
        // 发起axios请求接口
        this.axios.get(url, {params})
          .then(res => {
            // 得到后台数据
            console.log(res.data);

            // #将json数据取出来,一个一个的按照位置填充到模板
            this.msg = res.data.bpi.EUR.description;
            this.detail = res.data.bpi.EUR.rate_float;


            console.log("11111111111111"+res.data.bpi)
          })

          // 响应失败
          .catch(err => {
            // alert('链接错误')
          })
      }
    }

完整代码:

<template>
  <div>
    <div class="t3">1111{{ msg }}
      <p>
        <input type="text" v-model="detail">
      </p>
      <p>展示:{{detail}}</p>

      <li v-for="(key, value, index) in objs">
        {{'展示v-for遍历:'+ index }}-{{key}}-{{value}}
      </li>
    </div>
  </div>
</template>

<script>
  export default {
    name: 't3',
    data () {
      return {
        datalist: 'res.data',
        msg: '',
        detail: ''
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        var url = 'https://api.coindesk.com/v1/bpi/currentprice.json'

     // 配置url参数
        var params = {
          // dataType: 'YEAR',
          // user_id: '123'
        }
        // 发起axios请求接口
        this.axios.get(url, {params})
          .then(res => {
            // 得到后台数据
            console.log(res.data);

            // #将json数据取出来,一个一个的按照位置填充到模板
            this.msg = res.data.bpi.EUR.description;
            this.detail = res.data.bpi.EUR.rate_float;


            console.log("11111111111111"+res.data.bpi)
          })

          // 响应失败
          .catch(err => {
            // alert('链接错误')
          })
      }
    }
  }
</script>

<!--css样式-->
<style>
  .t3 {
    width: 500px;
    height: 600px;
    border-color: blueviolet;
    border: 1px solid;
    /*margin-top: 200px;*/
    /*margin-left: 100px;*/
    float: left;
  }

  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .3s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(10px);
    opacity: 0;
  }
</style>