vue unshift

作者：翔龙天下发布日期:2025-02-24 浏览:97

// 使用 Vue 的 unshift 方法向数组的开头添加一个元素

new Vue({
  el: '#app',
  data: {
    items: ['apple', 'banana', 'orange']
  },
  methods: {
    addItem() {
      // 使用 unshift 方法在数组的开头添加一个新元素
      this.items.unshift('grape');
    }
  }
});

<!-- HTML 部分 -->
<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
  <button @click="addItem">Add Item</button>
</div>

解释说明：

unshift 是 JavaScript 数组的一个原生方法，用于在数组的开头添加一个或多个元素。
在 Vue 中，你可以直接在响应式数据对象中的数组上调用 unshift 方法。Vue 会自动检测到数组的变化并更新视图。
上面的代码展示了如何使用 unshift 方法在数组的开头添加一个新元素，并通过点击按钮触发该操作。
当点击按钮时，addItem 方法会被调用，将 'grape' 添加到 items 数组的开头，页面上的列表也会相应地更新。

上一篇：vue表格组件

下一篇：vue关闭eslint