<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<div id="app">
    <div>
      <span v-for="item in list"><span>{{ item.id }}</span>-<span>{{ item.name }}</span></span>
      <div @click="change">变换孩子节点位置</div>
    </div>
	</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.8/vue.min.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data() {
				return {
					list: [
            { id: 1, name: '名称1' },
            { id: 2, name: '名称2' },
            { id: 3, name: '名称3' },
            { id: 4, name: '名称4' },
            { id: 5, name: '名称5' },
          ]
				}
			},
      methods: {
        change(){
          this.list.reverse();
        }
      }
		})
	</script>
</body>
</html>
span{
    display: inline-block;
    margin: 10px;
    border: 1px solid yellowgreen;
    background-color: brown;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 15px;
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.8/vue.min.js