vue 请求接口示例 --小丑

最新推荐文章于 2025-09-29 08:19:30 发布

转载最新推荐文章于 2025-09-29 08:19:30 发布 · 1.5k 阅读

文章标签：

#vue

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用Vue.js进行数据请求并更新视图的例子。通过点击按钮触发axios库的GET请求，从后端接口获取数据，并将返回的数据绑定到页面上显示。此示例展示了Vue组件的生命周期钩子和数据响应机制。

<template>
  <div class="hello">
    <div>
      {{title}}
    </div>
    <hr>
    <button @click="convert">点击获取数据</button>
  </div>
</template>
 
<script>
  import axios from 'axios'
 
  export default {
    name: 'HelloWorld',
    data() {
      return {
        title: "静态数据"
      }
    },
    //在这里调用ajax请求方法
    created(){
      this.convert();
    },
    methods: {
      convert: function () {
        axios.get("api/sysUser/getSomething").then(res => {
          this.title = res.data;
        })
      }
    }
  }
</script>