Question

这是我从网址收到的数据。我只需要打印第2行和第4行，

{
    "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脚本如下。这是我从相应的URL

中检索值的方法

 <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>

请帮我只显示第2和第4篇文章[]？我在js中很弱。所以，帮助我很好

Answer 1

在第2行和第4行，我假设您指的是索引1和3处的元素。最简单的方法是使用以下条件添加v-if绑定：articles.indexOf(post) == 1 || articles.indexOf(post) == 3。

＆＃13;

new Vue({
  el: '#feed',
  data: {
    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://"
      }
    ]
  }
});

＆＃13;

<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>

＆＃13;

为了将UI与逻辑分开，您可以使用计算用于此目的。计算可以过滤所需的值，如：

return this.articles.filter(t => 
    this.articles.indexOf(t) == 1 
    || this.articles.indexOf(t) == 3
);

＆＃13;

new Vue({
  el: '#feed',
  data: {
    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://"
      }
    ]
  },
  computed: {
    filteredPosts() {
      return this.articles.filter(t => this.articles.indexOf(t) == 1 || this.articles.indexOf(t) == 3);
    }
  }
});

＆＃13;

<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>

＆＃13;

注意：我已将帖子作者添加到显示中，以便更轻松地了解已过滤项目的索引。

更新

As suggested by Bert，过滤器可以改进为：

return this.articles.filter((t, i) => 
    i == 1 || i == 3
);

＆＃13;

new Vue({
  el: '#feed',
  data: {
    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://"
      }
    ]
  },
  computed: {
    filteredPosts() {
      return this.articles.filter((t,i) => i == 1 || i == 3);
    }
  }
});

＆＃13;

<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>

＆＃13;

如何使用vue js显示指定的行？

1 个答案:

更新