<template>
<div class="nav">
<input v-model="name" type="text" />
<button @click="Delete()">查询</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "DleteView",
data() {
return {
name: [],
};
},
methods: {
Delete() {
axios({
// 请求方式
method: "GET",
// 请求地址
url: `http://localhost:8086/delete`,
// URL中的查询参数
params: {
id: this.name,
},
}).then(function (result) {
this.name = result.data;
});
},
},
};
</script>
<style>
.nav {
border-top: 3px solid #ff8500;
background-color: #fcfcfc;
border-bottom: 1px solid #edeeed;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0px 10px;
font-size: 15px;
color: #4c4c4c;
font-family: "微软雅黑";
text-decoration: none;
}
.nav a:hover {
background: #edeeed;
color: #ff8500;
}
</style>
<template>
<div class="nav">
<input v-model="count" type="text" />
<div v-for="item in name" :key="item.id">
<div class="navs">
<label for="#">账号:</label>
<span>{{ item.id }}</span
> <label for="#">部门:</label>
<span>{{ item.locationString }}</span
> <label for="#">名字:</label>
<span>{{ item.name }}</span>
</div>
</div>
<button @click="Delete()">查询</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "DleteView",
data() {
return {
count: [],
name: [],
};
},
methods: {
Delete() {
axios({
// 请求方式
method: "GET",
// 请求地址
url: `http://localhost:8086/delete`,
// URL中的查询参数
params: {
id: this.count,
},
}).then((result) => {
console.log(result.data);
this.name = result.data;
});
},
},
};
</script>
vue-axios 输入参数获取数据的写法的相关教程结束。
