[英]How to display specified rows using vue js?
这是我从url获得的数据。 我只需要打印第二行和第四行,
{
"status": "ok",
"source": "n",
"sortBy": "top",
"articles": [
{
"author": "Bradford ",
"title": "friends.",
"url": "http: //",
"urlToImage": "http://"
},
{
"author": "Bradford ",
"title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
"url": "http: //",
"urlToImage": "http://"
},
"author": "Bord ",
"title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
"url": "http: //",
"urlToImage": "http://"
},
"author": "Brad ",
"title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
"url": "http: //",
"urlToImage": "http://"
}
]
}
我的vue js脚本如下。 这就是我从相应网址中检索值的方式
<script>
new Vue({
el: '#feed' ,
data: {
articles: [],
},
mounted() {
this.$nextTick(function() {
var self = this;
$.ajax({
url: "https://newsapi.org/v1/articles?source=espn&sortBy=top&apiKey=4db9d5d381a14ffcbca8e8a9aa8b864c",
method: "GET",
dataType: "JSON",
success: function (e) {
if (e.status == 'ok') {
self.articles = e.articles;
console.log(e.articles)
}
}, error: function(){
console.log('Error occurred');
}
});
})
},
})
</script>
我的HTML是
<div id="feed">
<div v-for="post in articles" class="mke_">
<div class="row">
{{post.title}}
</div>
</div>
</div>
请帮助我只显示第二和第四篇文章[]? 我在JS方面很弱。 所以,很乐意帮助我
在第二行和第四行,我假设您的意思是索引1和3处的元素。最简单的方法是添加v-if
绑定,其条件如下: articles.indexOf(post) == 1 || articles.indexOf(post) == 3
articles.indexOf(post) == 1 || articles.indexOf(post) == 3
。
new Vue({ el: '#feed', data: { articles: [{ "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bradford ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bord ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Brad ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" } ] } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="feed"> <div v-for="post in articles" v-if="articles.indexOf(post) == 1 || articles.indexOf(post) == 3" class="mke_"> <div class="row"> {{post.title}} <br/> <small>{{post.author}}</small> </div> </div> </div>
为了将UI与逻辑分开,您可以为此目的使用计算。 计算出的值可以过滤所需的值,例如:
return this.articles.filter(t =>
this.articles.indexOf(t) == 1
|| this.articles.indexOf(t) == 3
);
new Vue({ el: '#feed', data: { articles: [{ "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bradford ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bord ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Brad ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" } ] }, computed: { filteredPosts() { return this.articles.filter(t => this.articles.indexOf(t) == 1 || this.articles.indexOf(t) == 3); } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="feed"> <div v-for="post in filteredPosts" class="mke_"> <div class="row"> {{post.title}} <br/> <small>{{post.author}}</small> </div> </div> </div>
注意:我已将帖子作者添加到显示中,以便更轻松地了解已过滤项目的索引。
正如Bert所建议的 ,可以将过滤器改进为:
return this.articles.filter((t, i) =>
i == 1 || i == 3
);
new Vue({ el: '#feed', data: { articles: [{ "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bradford ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bord ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Brad ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" } ] }, computed: { filteredPosts() { return this.articles.filter((t,i) => i == 1 || i == 3); } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="feed"> <div v-for="post in filteredPosts" class="mke_"> <div class="row"> {{post.title}} <br/> <small>{{post.author}}</small> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.