vue中如何用一个button管理页面中所有的输入框是否填写内容

在Vue中，可以使用v-model指令来绑定表单输入框的值。要管理页面中所有输入框是否填写内容，可以使用一个data属性来存储输入框的值，然后在按钮上绑定一个方法，该方法检查每个输入框的值是否为空，并在所有输入框都有值时启用按钮。以下是一个示例代码：

<template>
  <div>
    <input v-model="input1" />
    <input v-model="input2" />
    <button :disabled="!isFormValid" @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
    };
  },
  computed: {
    isFormValid() {
      return this.input1 !== "" && this.input2 !== "";
    },
  },
  methods: {
    submitForm() {
      // 在这里处理表单提交逻辑
    },
  },
};
</script>

在上面的代码中，我们使用v-model指令将两个输入框绑定到data属性中的input1和input2。我们还使用了一个computed属性isFormValid，该属性检查两个输入框是否都有值，如果都有值，则返回true，否则返回false。最后，我们将该属性绑定到按钮的disabled属性上，以便在所有输入框都有值时启用按钮。当用户单击按钮时，调用submitForm方法来处理表单提交逻辑。