javascript - 怎么把后台获取到的数据在页面显示出来?
本文介绍了javascript - 怎么把后台获取到的数据在页面显示出来?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1.后台数据我获取到了,并且在控制台中能打印出来,问题是我怎么把这打印的数据 ,显示在html 里面,利用起来, 而不是单纯只会在控制台打印?
<!doctype html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta charset="UTF-8"/>
<title>Document</title>
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.min.js"></script>
</head>
<body>
<div id="box">
<button @click="gets1(1)">get1</button>
{{rel}}
</div>
<script>
new Vue({
el:'#box',
data:{},
methods:{
gets1:function(num){
console.log(num);
this.$http.get('php/get.php').then(function(rel){
console.log(rel);
},function(err){
})
},
}
})
</script>
</body>
</html>解决方案
new Vue({
el:'#box',
data:function() {
return {
rel: ""
}
},
methods:{
gets1:function(num){
console.log(num);
// 把this赋值给self变量
var self = this;
this.$http.get('php/get.php').then(function(rel){
console.log(rel);
/* 这个里面的this指向的不是Vue实例
* 非严格模式下是Window对象，所以使用this.rel不起作用
* 所以在外层先把this赋值给self变量
*/
// this.rel = rel;
self.rel = rel;
},function(err){
})
},
}
})Update:
上面的不起作用是this的指向不对，先把上面的代码进行修改；
这篇关于javascript - 怎么把后台获取到的数据在页面显示出来?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
