vue v-for循环按钮并多个点击按钮并改变他的type状态

可以使用一个数组来存储按钮的状态，然后在v-for循环中使用这个数组来绑定每个按钮的状态。当按钮被点击时，可以通过修改数组中对应位置的值来改变按钮的状态。

HTML代码：

<div id="app">
  <button v-for="(btn, index) in buttons" :key="index" :type="btn.type" @click="changeType(index)">{{ btn.label }}</button>
</div>

Vue.js代码：

new Vue({
  el: "#app",
  data: {
    buttons: [
      { label: "Button 1", type: "primary" },
      { label: "Button 2", type: "success" },
      { label: "Button 3", type: "warning" },
      { label: "Button 4", type: "danger" },
    ],
  },
  methods: {
    changeType(index) {
      const newType = this.buttons[index].type === "primary" ? "info" : "primary";
      this.buttons[index].type = newType;
    },
  },
});

在这个例子中，我们定义了一个按钮数组，每个按钮都有一个label和type属性。在v-for循环中，我们绑定了每个按钮的label和type属性，并为每个按钮添加了一个@click事件。当按钮被点击时，我们调用changeType方法来改变对应按钮的type属性。在changeType方法中，我们根据按钮当前的type属性值来切换为另一个type值。