vue-resource 的get和post学习
<template>
<div class="winter">
<button @click="getUser">点我1</button>
<button @click="postWq">点我2</button>
<div v-for="item in msg">
<p>{{item.id}}</p>
<p>{{item.name}}</p>
<p>{{item.age}}</p>
</div>
<p>{{msg2.id}}</p>
<p>{{msg2.name}}</p>
<p>{{msg2.age}}</p>
</div>
</template>
<script>
export default{
name:'winter',
data() {
return{
msg:'',
msg2:''
}
},
methods:{
getUser(){
this.$http.get("http://localhost:5000/api/values").then((res)=>{
console.log(this.msg=res.body)//请求成功打印数据(数据后台给的)
})
.catch((res)=>{alert(1)})//请求失败弹出1
},
postWq () {
let ws = {'id': 1, 'name': '你好', 'age': 20}
this.$http.post('http://localhost:5000/api/values', ws).then(a => {
console.log(this.msg2 = a.data)//请求成功打印数据1 你好 20
}).catch((e) => {
alert(1)//请求失败弹出1
})
}
}
}
</script>