vue_api.html

<!--
 * @Description: 
 * @Author:: MINUS
 * @Version: 
 * @Date: 2020-10-07 11:29:39
 * @LastEditTime: 2020-10-07 17:00:47
 * @FilePath: /vue-demo01/src/App.vue
-->
<template>
  <!-- <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div> -->
  <div id="app">
    <span>apikey</span><input type="text" v-model=apikey>
    <span>find sex</span><input type="text" v-model=sex>
    <button @click="Getbook()">获取</button>
<h5 v-if="data !=''">找到以下</h5>
<h6 v-if="data==='兄弟,又到了充钱的时候哦!'">{{data}}</h6>
<h6 v-if="data==='查无此人哦'">{{data}}</h6>
    <div v-show="data!='兄弟,又到了充钱的时候哦!'&data !='查无此人哦'" v-for="i in data">
        
        <h6><span>姓名:</span>{{i.name}}
        <span>工作:</span>{{i.job}}
        <span>坐标:</span>{{i.city}}
        <span>年龄:</span>{{i.age}}
    <span>收入:</span>{{i.income}}<span>元/月</span></h6>
    </div>
  </div>
</template>

<script>
    import Axios from 'axios';
    export default {
        name: 'app',
        data() {
            return {
                apikey: "abcdefghigklmn",
                sex: "",
                data: [],
            }
        },
        methods: {
            Getbook() {
                var api1 = "http://127.0.0.1:8000/apiuser/?apikey=" + this.apikey
                var api2 = "&sex=" + this.sex
                var api = api1 + api2
                console.log("api", api)
                Axios.get(api)
                    .then((response) => {
                        console.log(response);
                        this.data = response.data
                    })
                    .catch((error) => {
                        console.log("error is :", error);
                    })
            },
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>