vue中数组的值交换位置

替换数组

 

 data () {
    return {
        tableData: [1,2,3]
    }
  }


数组的某一位与前一位交换(例:表格上移)

        // index 是索引位置
        var tempOption = this.tableData[index - 1]
        this.$set(this.tableData, index - 1, this.tableData[index])
        this.$set(this.tableData, index, tempOption)

数组的某一位与后一位交换(例:表格下移)

        //index 是索引位置
        var tempOption = this.tableData[index + 1]
        this.$set(this.tableData, index + 1, this.tableData[index])
        this.$set(this.tableData, index, tempOption)
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想在 Vue 修改数组对象的重复,可以按照以下步骤: 1. 找到数组所有重复的 - 可以使用 `reduce()` 方法来创建一个新的数组,只包含重复的 - 也可以使用 `filter()` 方法来过滤出重复的 2. 对于每个重复的,进行修改 - 可以使用 `map()` 方法来修改每个重复的 - 可以使用 `Vue.set()` 方法来更新 Vue 数据响应式 以下是一个示例代码,演示如何在 Vue 修改数组对象的重复: ```vue <template> <div> <ul> <li v-for="(item, index) in modifiedArr" :key="index">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { arr: [ { id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "John" }, { id: 4, name: "Peter" }, { id: 5, name: "Jane" }, ], }; }, computed: { duplicates() { return this.arr.reduce((acc, curr, index, array) => { if (array.findIndex((item) => item.name === curr.name) !== index && acc.indexOf(curr.name) === -1) { acc.push(curr.name); } return acc; }, []); }, modifiedArr() { return this.arr.map((item) => { if (this.duplicates.indexOf(item.name) !== -1) { const newItem = { ...item, name: `${item.name} (modified)` }; Vue.set(this.arr, this.arr.indexOf(item), newItem); return newItem; } return item; }); }, }, }; </script> ``` 在上面的示例,我们使用 `computed` 计算属性来获取修改后的数组对象。首先,我们使用 `reduce()` 方法找到了所有重复的,然后使用 `map()` 方法对每个重复的进行了修改。在修改的过程,我们使用了 `Vue.set()` 方法来更新 Vue 数据响应式。最终输出的结果是: ```html <div> <ul> <li>John</li> <li>Jane</li> <li>John (modified)</li> <li>Peter</li> <li>Jane (modified)</li> </ul> </div> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值