Question

这是我的vue实例：

new Vue({
    el: '#app',
    data: {
      showPerson: true,
      persons:
        [
          {id: 1, name: 'Alex'},
          {id: 2, name: 'Bob'},
          {id: 3, name: 'Chris'}
        ],
    },
    methods: {
      nextPerson: function(){
        this.showPerson = false;
      }
    }
  });

我正试图走persons个对象数组。我希望列表以数组的第一个元素开头，下面应该是一个按钮，它负责隐藏前一个元素并显示数组的下一个元素。一旦用户到达最后一个元素，Next按钮就不应该返回到第一个元素。

这是HTML：

<div id="app">
  <ul v-for="person in persons">
    <li v-if="showPerson">{{person.name}}</li>
  </ul>
  <button @click="nextPerson">Next Person</button>
</div>

JSBin Link.此时我只能一次显示和隐藏所有项目，而不是一次显示和隐藏项目。我该如何实现呢？

Answer 1

这样做的一种方法是为屏幕上显示的人保留一个索引。我已将此变量命名为{ "kind": "youtube#searchListResponse", "etag": "\"cbz3lIQ2N25AfwNr-BdxUVxJ_QY/fkLih7vu8hjlSWPap-46qmMBkKw\"", "nextPageToken": "CAMQAA", "regionCode": "TH", "pageInfo": { "totalResults": 1000000, "resultsPerPage": 3 }, "items": [ { "kind": "youtube#searchResult", "etag": "\"cbz3lIQ2N25AfwNr-BdxUVxJ_QY/xzdNtvTMaihnGappsfbZRCdysc4\"", "id": { "kind": "youtube#video", "videoId": "iKzRIweSBLA" }, "snippet": { "publishedAt": "2017-09-22T07:02:24.000Z", "channelId": "UC0C-w0YjGpqDXGB8IHb662A", "title": "Ed Sheeran - Perfect [Official Lyric Video]", "description": "Out Now: https://atlanti.cr/yt-album Subscribe to Ed's channel: http://test.ly/SubscribeToEdSheeran Follow Ed on... Facebook: ...", "thumbnails": { "default": { "url": "https://i.ytimg.com/vi/iKzRIweSBLA/default.jpg", "width": 120, "height": 90 }, "medium": { "url": "https://i.ytimg.com/vi/iKzRIweSBLA/mqdefault.jpg", "width": 320, "height": 180 }, "high": { "url": "https://i.ytimg.com/vi/iKzRIweSBLA/hqdefault.jpg", "width": 480, "height": 360 } }, "channelTitle": "Ed Sheeran", "liveBroadcastContent": "none" } }, { "kind": "youtube#searchResult", "etag": "\"cbz3lIQ2N25AfwNr-BdxUVxJ_QY/7lxJIhHg_j7RWlEuZp87hFExzCg\"", "id": { "kind": "youtube#video", "videoId": "nfs8NYg7yQM" }, "snippet": { "publishedAt": "2017-04-24T17:00:05.000Z", "channelId": "UCwppdrjsBPAZg5_cUwQjfMQ", "title": "Charlie Puth - Attention [Official Video]", "description": "Download and Stream \"Attention\": https://Atlantic.lnk.to/AttentionID Pre-Order Voicenotes: https://Atlantic.lnk.to/VoicenotesID Exclusive VoiceNotes Merchandise ...", "thumbnails": { "default": { "url": "https://i.ytimg.com/vi/nfs8NYg7yQM/default.jpg", "width": 120, "height": 90 }, "medium": { "url": "https://i.ytimg.com/vi/nfs8NYg7yQM/mqdefault.jpg", "width": 320, "height": 180 }, "high": { "url": "https://i.ytimg.com/vi/nfs8NYg7yQM/hqdefault.jpg", "width": 480, "height": 360 } }, "channelTitle": "Charlie Puth", "liveBroadcastContent": "none" } }, { "kind": "youtube#searchResult", "etag": "\"cbz3lIQ2N25AfwNr-BdxUVxJ_QY/HOZpkTZCsq-gixbvF4mQGcdiepE\"", "id": { "kind": "youtube#video", "videoId": "kXYiU_JCYtU" }, "snippet": { "publishedAt": "2007-03-05T08:12:00.000Z", "channelId": "UCZU9T1ceaOgwfLRq7OKFU4Q", "title": "Numb (Official Video) - Linkin Park", "description": "Linkin Park \"Numb\" off of the album METEORA. Directed by Joe Hahn. http://www.linkinpark.com | http://LPUnderground.com iTunes: http://go.lprk.co/ml/3pb/ ...", "thumbnails": { "default": { "url": "https://i.ytimg.com/vi/kXYiU_JCYtU/default.jpg", "width": 120, "height": 90 }, "medium": { "url": "https://i.ytimg.com/vi/kXYiU_JCYtU/mqdefault.jpg", "width": 320, "height": 180 }, "high": { "url": "https://i.ytimg.com/vi/kXYiU_JCYtU/hqdefault.jpg", "width": 480, "height": 360 } }, "channelTitle": "Linkin Park", "liveBroadcastContent": "none" } } ] }。

然后，您需要在点击按钮时显示下一个人。因此，在click事件处理程序中，您需要将索引增加1.此外，您需要确保索引值不超过数组的长度。所以我按如下方式修改了点击处理程序：

shownPersonIndex

最后，您可以使用计算机显示当前显示的人或内联表达式（如nextPerson: function() { if(this.shownPersonIndex < (this.persons.length - 1)) { this.shownPersonIndex++; } }）以在屏幕上显示此人。

我正在使用this.persons[this.shownPersonIndex].name隐藏＆＃34; next＆＃34;当你到达阵列的最后一个元素时按钮。

＆＃13;

v-if="this.shownPersonIndex != this.persons.length - 1"

＆＃13;

new Vue({
  el: '#app',
  data: {
    shownPersonIndex: 0,
    persons: [{
        id: 1,
        name: 'Alex'
      },
      {
        id: 2,
        name: 'Bob'
      },
      {
        id: 3,
        name: 'Chris'
      }
    ],
  },
  methods: {
    nextPerson: function() {
      if(this.shownPersonIndex < (this.persons.length - 1)) {
        this.shownPersonIndex++;
      }
    }
  },
  computed: {
    shownPerson: function() {
      return this.persons[this.shownPersonIndex];
    }
  }
});

＆＃13;

如何遍历VueJS中的项目列表

1 个答案: