Vue 目标: 点击按钮, 改变3个li的顺序, 在头上的就到末尾.

你可以通过Vue的指令和事件处理来实现这个目标。首先，给按钮绑定一个点击事件，然后在事件处理函数中编写逻辑来改变li的顺序。

在Vue中，你可以使用v-for指令来循环渲染li元素，并使用一个数组来保存li的顺序。当点击按钮时，你可以使用数组的方法来改变li元素的顺序。

以下是一个简单的示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <button @click="changeOrder">改变顺序</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['头部', '中间', '尾部']
    }
  },
  methods: {
    changeOrder() {
      // 将头部元素移到末尾
      const firstItem = this.items.shift();
      this.items.push(firstItem);
    }
  }
}
</script>

在上述代码中，我们通过data属性定义了一个名为items的数组，其中包含了三个li元素的内容。在模板中使用v-for指令循环渲染li元素，并使用:key绑定每个li元素的唯一标识。点击按钮时，调用changeOrder方法来改变li元素的顺序，具体实现是将头部元素移除并添加到末尾。

这样，当你在浏览器中运行这段代码时，点击按钮后，li元素的顺序会发生改变，头部的元素会移动到末尾。