Vue数组concat方法详解

一、Vue数组指定排序

在Vue的数组操作中，concat方法可以用于将两个数组合并为一个数组。如果现有数组中的元素需要排序，可以使用sort方法，并指定排序的属性。

<template>
  <div>
    <ul>
      <li v-for="item in sortedList" :key="item.id">{{ item.name }} - {{ item.age }}
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Alice', age: 20 },
        { id: 2, name: 'Bob', age: 18 },
        { id: 3, name: 'Charlie', age: 25 }
      ]
    }
  },
  computed: {
    sortedList() {
      return this.list.sort((a, b) => a.age - b.age)
    }
  }
}
</script>

在上面的例子中，利用sort方法，将list中的对象按照age从小到大排序，最终在页面中展示。

二、Vue数组多属性排序

如果需要根据多个属性来排序，在sort方法的参数中，可以自定义比较函数。

<template>
  <div>
    <ul>
      <li v-for="item in sortedList" :key="item.id">{{ item.name }} - {{ item.age }} - {{ item.salary }}
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Alice', age: 20, salary: 5000 },
        { id: 2, name: 'Bob', age: 18, salary: 6000 },
        { id: 3, name: 'Charlie', age: 25, salary: 4500 }
      ]
    }
  },
  computed: {
    sortedList() {
      return this.list.sort((a, b) => {
        if (a.age === b.age) {
          return a.salary - b.salary
        }
        return a.age - b.age
      })
    }
  }
}
</script>

在上面的例子中，按照age从小到大排序，如果age相同，就按照salary从小到大排序。

三、Vue数组遍历

Vue的指令v-for可以用于遍历数组中的数据并进行渲染。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange']
    }
  }
}
</script>

在上面的例子中，使用v-for指令将list数组中的每一个元素都遍历出来，并渲染到页面上。

四、Vue数组操作方法

除了concat之外，Vue还提供了许多其他的数组操作方法，包括push、pop、shift、unshift、splice等等。

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }} - {{ item.age }}
    </ul>
    <button @click="add">Add
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Alice', age: 20 },
        { id: 2, name: 'Bob', age: 18 },
        { id: 3, name: 'Charlie', age: 25 }
      ]
    }
  },
  methods: {
    add() {
      this.list.push({ id: 4, name: 'David', age: 30 })
    }
  }
}
</script>

在上面的例子中，点击Add按钮，向list数组中添加一个新的元素，然后重新渲染到页面上。

五、Vue数组获取数据

在Vue中，可以通过$refs属性获取到DOM元素，然后通过JavaScript操作DOM元素达到我们想要的效果，这也同样适用于遍历的数组。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" ref="myList" :key="index">{{ item }}
    </ul>
    <button @click="showData">Show Data
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange']
    }
  },
  methods: {
    showData() {
      const items = this.$refs.myList
      items.forEach(item => console.log(item.innerText))
    }
  }
}
</script>

在上面的例子中，通过$refs属性获取了ul元素，然后利用JavaScript遍历了其中的li元素，并输出了每个li元素的内容到控制台。

六、Vue数组disable选取

在Vue中，可以通过v-bind绑定值为disabled来禁用表单元素，同理，也可以通过v-bind绑定值为disabled来禁用选项卡等元素。

<template>
  <div>
    <select v-model="fruit" :disabled="disabled">
      <option value="apple">Apple
      <option value="banana">Banana
      <option value="orange">Orange
    </select>
    <button @click="toggleDisable">Toggle Disable
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruit: 'apple',
      disabled: false
    }
  },
  methods: {
    toggleDisable() {
      this.disabled = !this.disabled
    }
  }
}
</script>

在上面的例子中，通过v-bind绑定值为disabled，根据disabled属性的值决定是否禁用select元素，在点击Toggle Disable按钮时，改变disabled属性的值，从而达到禁用/启用select元素的目的。