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元素的目的。