Vue.js 读取json
这里使用两种方法获取json 并讲数据显示到页面上
- 使用 ajax 请求到json数据并将其绑定在页面上
- 使用 vue-resource.js 请求数据
页面显示结果为
结果图
首先是 测试的json 数据
{
"msg": "succ",
"data": [
{
"name": "aaa",
"age": 18,
"sex": 1
},
{
"name": "bbb",
"age": 10,
"sex": 0
}
]
}
比较简单的接口 使用msg 标示 请求是否成功 数据存于data 中
具体源码在可以从下方链接中看到
这里主要说一下需要注意的部分
-
v-if
<span v-if="pep.sex == 1">男</span><span v-else>女</span> -
v-for
<tr v-for = "pep in peps "><td>{{pep.name}}</td></tr> -
赋值
function pushDom(data1){ var vm = new Vue({ el: '#app', data: { peps:data1 } }); -
新的赋值方式
this.peps = resdata
代码部分
第一种方式获取
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vue & Js</title>
</head>
<body>
<table id = 'app'>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr v-for = "pep in peps ">
<td>{{pep.name}}</td>
<td>{{pep.age}}</td>
<td>
<span v-if="pep.sex == 1">男</span>
<span v-else>女</span>
</td>
</tr>
</table>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$.ajax({
type:'get',
url:'info.json',
success: function(data){
if(data.msg == "succ"){
pushDom(data.data);
}else{
alert("服务器返回异常");
}
},
error: function(data){
alert(JSON.stringify(data));
}
});
function pushDom(data1){
var vm = new Vue({
el: '#app',
data: {
peps:data1
}
});
}
})
</script>
</body>
</html>
使用第二种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vue 使用原生读取json</title>
</head>
<body>
<table id = 'app'>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr v-for = "pep in peps ">
<td>{{pep.name}}</td>
<td>{{pep.age}}</td>
<td>
<span v-if="pep.sex == 1">男</span>
<span v-else>女</span>
</td>
</tr>
</table>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
peps: ''
},
mounted: function() {
this.getJsonInfo()
},
methods: {
getJsonInfo: function() {
this.$http.get('info.json').then(function(response){
console.log(response.data.data)
var resdata = response.data.data
this.peps = resdata
}).catch(function(response){
console.log(response)
console.log("居然没有弹窗")
})
}
}
})
</script>
</body>
</html>
值得注意的是在vue2.0 中已经废弃了ready 方式而使用了<span style ="color:red">mounted</span>方法
来自** 李龙的博客**的 《Vue.js 读取json》
网友评论