Question

{
    "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://"
        }
    ]
}

我的vue js脚本是

<script>
feed = new Vue({
    'el': '#feed',
    data: {
        articles: [],
    },
    mounted: function () {
        var self = this;
        $.ajax({
            url: "https://newsapi.org/v1/articles?source=espn&sortBy=top&apiKey=4db9d5d381a14ffcbca8e8a9aa8b864c",
            method: "GET",
            dataType: "JSON",
            data: {},
            success: function (e) {
                if (e.status == ok) {
                    self.data = e.data;
                }
            }
        });
    }
});
</script>

显示为

        <div v-for="post in articles" class="mke_">
            <div class="row">
          <div class="col-md-1"><img src="//placehold.it/130" class="media-object"></div>
    {{post.title}}
        </div></div>

可以sombody请帮我在文章[]中显示内容吗？我在vue js中很弱..模式是否合适。

Answer 1

试试这个

您的 vue脚本应该是这样的

<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">
          <div class="col-md-1"><img src="//placehold.it/130" class="media-object"></div>
          {{post.title}}
        </div>
 </div>

您可以在此处查看https://jsfiddle.net/adkstar/hf9w9zL3/

EDITED：要仅显示第三篇和第五篇文章，您可以

  <div v-for="(post,index) in articles" class="mke_">
    <div v-if="(index == 3 || index == 5)">
      <div class="row">
          <div class="col-md-1"><img src="//placehold.it/130" class="media-object"></div>
            {{post.title}}
      </div>
    </div>
  </div>

Answer 2

您在自我变量中保存了上下文是件好事您只需使用self.articles = e.articles;编辑代码一旦数据绑定到self.articles，Vue就会调用articles getter / setter函数（声明性反应式渲染概念）并更新它。
更新的答案：
使用以下命令编辑您的HTML：

<div v-for="(post,index) in articles" class="mke_">
            <div class="row" v-if="index == 3 || index == 5">
          <div class="col-md-1"><img src="//placehold.it/130" class="media-object"></div>
    {{post.title}}
        </div></div>

如何使用vue js显示以下值？

2 个答案: