var topArticle=new Vue({
el:'#toparticle',
data:{topmostArticle:null},
created: function(){
fetch('topnews.json')
.then(r=>r.json())
.then(res=>{this.topmostArticle=$.grep(res,function(e){return e.topnews!==" "});
console.log(this.topmostArticle);
});
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The greatest news app ever</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id ="toparticle">
<img src="{{topmostArticle[0].topnews[0].img}}">
<img src="2.jpg">
"{{topmostArticle[0].topnews[0].img}}"
</div>
<script src="main.js"></script>
</body>
</html>
我正在尝试使用外部文件加载图像的源，但我遇到了一些问题...图像标记中无法识别源 . 代码应该是正确的，因为当数据加载到图像标记之外时它很好用 . 任何人有任何想法？非常感谢！
没有加载第一个图像（因为src是通过json传输的），第二个是ok，第三个命令是“{{topmostArticle [0] .topnews [0] .img}}”，返回“2.jpg”所以没关系
JSON
[{"topnews":[
{"timestamp":"0",
"id":"2",
"cathegory":"2",
"headline":"2",
"text":"2",
"img":"2.jpg",
"url":"2.jpg",
"author":"2",
"comments":"2"
},
{"timestamp":"0",
"id":"2",
"cathegory":"3",
"headline":"3",
"text":"3",
"img":"3",
"url":"3",
"author":"3",
"comments":"3"
}
]}]
问题是为什么我不能直接通过json加载src？请点击下面的链接（网页视图）以获得更清晰的信息！
[web view][1]
[1]: https://i.stack.imgur.com/gbFeq.png
1 回答
尝试更改绑定属性的方式：