[英]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.