如何用队列（FIFO）实现Vue.js动态列表置顶新增项

我明白你的需求啦——你希望每次新增的链接都显示在列表最顶部，也就是新元素永远排在最前面，而不是现在的第二个位置。问题出在你当前用了push()方法（把元素加到数组末尾），再加上初始数组里有个空对象，才导致新元素看起来跑到第二个位置去了。咱们来一步步修正：

核心修改点 #

• 替换数组操作方法：用unshift()代替push()，把新元素插入到数组的开头，这样渲染的时候自然就在顶部了
• 优化数据初始化：移除初始的空对象，避免列表一开始就显示空项
• 用Vue的响应式绑定替代原生DOM获取：不要直接用document.getElementById，改用v-model绑定输入框，这才是Vue的正确打开方式
• 添加输入校验：避免用户添加空链接

修改后的完整代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id=app>
  <div class="container-fluid row">
    <div class="form-group col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8" id="first">
      <div class="input-group">
        <!-- 用v-model绑定输入框的值 -->
        <input type="text" class="form-control" v-model="youtubeUrl" placeholder="Paste link here...">
        <div class="input-group-append">
          <button class="btn btn-primary" type="button" @click="addYouTubeUrl">Add</button>
        </div>
      </div>
      <hr>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" id="second">
      <h3 class="form-control">Playlist</h3>
      <hr>
      <ul class="list-group">
        <!-- 用item的唯一标识当key，这里暂时用url，实际项目建议用更唯一的id -->
        <li v-for="(anchorTag, index) in anchorTags" :key="anchorTag.url" class="list-group-item">
          <a :href="anchorTag.url" @click.prevent="playVideo($event)">{{anchorTag.value}}</a>
          <span v-if="anchorTag.url!==''"><i class="fas fa-trash-alt"></i></span>
        </li>
      </ul>
    </div>
  </div>
</div>

JavaScript部分 #

new Vue({
  el: '#app',
  data() {
    return {
      anchorTags: [], // 初始化为空数组
      youtubeUrl: '' // 用v-model绑定的输入值
    }
  },
  methods: {
    addYouTubeUrl() {
      // 校验输入不为空
      if (!this.youtubeUrl.trim()) {
        alert('请输入有效的链接！');
        return;
      }
      // 用unshift把新元素加到数组开头
      this.anchorTags.unshift({ 
        url: this.youtubeUrl, 
        value: this.youtubeUrl 
      });
      // 清空输入框
      this.youtubeUrl = '';
    },
    // 补上你定义了但没实现的playVideo方法
    playVideo(event) {
      // 这里可以写播放视频的逻辑
      console.log('播放视频：', event.target.href);
    }
  }
})

为什么这样修改？ #

1. unshift()的作用：和push()相反，unshift()会把元素插入到数组的第一个位置，这样v-for渲染的时候，最新的元素永远排在最前面，完美符合你要的“新增项在顶部”的展示效果
2. v-model绑定：Vue的核心是响应式数据，直接操作DOM获取值不符合Vue的设计理念，用v-model可以让输入框的值和data里的youtubeUrl实时同步，代码更简洁易维护
3. 空输入校验：避免用户点击添加按钮时插入空的链接项，提升用户体验

这样修改后，你每次点击Add按钮，新的链接就会立刻出现在列表的最顶部啦！

内容的提问来源于stack exchange，提问作者user11543110