用vue发送axios,使用绑定，回填数据，并利用新的数据去访问

最新推荐文章于 2023-08-05 10:58:59 发布

苗苗大佬

最新推荐文章于 2023-08-05 10:58:59 发布

阅读量350

点赞数

文章标签： vue.js javascript html axios

本文链接：https://blog.csdn.net/weixin_39349045/article/details/120406592

版权

框架

<!DOCTYPE html>
<html>
  <head>
    <title>vue实现axios</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="button" value="clik me" @click="getUserInfo"/>
      <div v-if="user_info">

      <p >
        {{ user_info }}
      </p>
      <input type="text"  v-model="user_info.age">
      <input type="text"  v-model="user_info.user">
      <input type="button" value="update" @click="update">
    </div>

    </div>
    <script>
    axios.defaults.baseURL= "http://127.0.0.1:5000/"
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          user_info : null
        }
      },
      methods: {
        update(){
          console.log(this.user_info)
          axios({
            url: '/user/data',
            method: 'post',
            data: this.user_info
          })
        },
        getUserInfo() {
          if (this.user_info !== null){
            this.user_info = null
          } else {
          axios({
              url: '/user/data',
              method: 'post',
              data: {
                name: 'xiaozhang'
              }
            }).then(response => {
              console.log("response:",response)
              console.log("response.data:",response.data)
              this.user_info = response.data.data
          })
        }}
      }
    })
    </script>
  </body>
</html>

在这里插入图片描述

苗苗大佬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用vue发送axios,使用绑定，回填数据，并利用新的数据去访问

框架<!DOCTYPE html><html> <head> <title>vue实现axios</title> <script src="./js/vue.js"></script> <script src="./js/axios.min.js"></script> </head> <body> <div id="app"
复制链接

扫一扫