首页 > 移动平台 > 详细

vuejs之vue.js+axios结合使用

时间:2020-02-17 19:48:13      阅读:65      评论:0      收藏:0      [点我收藏+]

看一个例子:

<html>

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

<body>
  <div id="app">
    <input type="button" value="获取笑话" @click="getJoke">
    <ul>
      <li v-for="(item, index) in jokes">
        {{item}}
      </li>
    </ul>
  </div>
  <script>
    var vue = new Vue({
      el: "#app",
      data: {
        jokes: []
      },
      methods: {
        getJoke: function () {
          var that = this;
          axios.get(‘https://autumnfish.cn/api/joke/list?num=3‘)
            .then(function (response) {
              that.jokes = response.data.jokes;
            }, function (err) {

            })
        }
      },
    })
  </script>
</body>

</html>

效果:

技术分享图片

点击获取笑话:

技术分享图片

获取了三条笑话。

说明:

需要引入:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
axios回调平函数中的this已改变,需要先存储vue中的this,才能进行下一步赋值。
和vue本地获取数据的最大区别就是改变了数据的来源。

vuejs之vue.js+axios结合使用

原文:https://www.cnblogs.com/xiximayou/p/12322807.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!