How does vue's v-for loop through the array in reverse order?

The company requires a dialogue window and requires the dialogue content to be stored in an array, then you see, this is not useful

1. The template part:

<template>
  <div>
    <div style="width:20px;height:20px;background:red"  v-for="(item,index) in arr.slice().reverse()" :key="index">{
   
   {item}}</div>
  </div>
</template>

Second, the script part:

<script>
export default {
  data(){
    return {
      arr:[1,2,4,5,6,7,8,9,10]   //这个是原数组,可以看到页面已经是呈现倒叙展示了
    }
  }
}
</script>

Summary: In fact, the main investigation is the joint use of slice() and reverse() of the js array. Of course, other methods can also be used, such as the monitoring attribute of vue, etc. I hope it will be helpful to you!

Guess you like

Origin blog.csdn.net/weixin_48373171/article/details/132068422