前端form表单在没有数据时按钮不显示在vue里怎么写

在Vue中，如果你想控制一个表单提交按钮的显示隐藏，可以根据表单是否有数据（比如v-model绑定的数据是否为空）来动态展示或隐藏按钮。你可以创建一个布尔属性来表示按钮的状态，并在模板上关联这个属性。下面是一个简单的示例：

<template>
  <div>
    <form v-if="hasFormData">
      <!-- 表单内容 -->
      <input type="text" v-model="formData" placeholder="请输入数据...">
      <button @click.prevent="submitForm" :disabled="!isValid">提交</button>
    </form>
    <span v-else>表单未填写</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: '',
      hasFormData: false,
      isValid: true, // 假设默认是有效，如果需要验证则在此做判断
    };
  },
  methods: {
    submitForm() {
      if (this.formData) { // 如果有数据并且验证通过
        this.hasFormData = false; // 隐藏按钮，防止重复提交
        // 进行实际的表单提交操作
      } else {
        this.isValid = false; // 数据为空，设置为无效状态
      }
    },
  },
};
</script>

在这个例子中，当`formData`为空时，`hasFormData`会被设置为`false`，表单内的按钮会隐藏。如果用户输入了数据并点击提交，`hasFormData`将变为`false`，同时按钮会被禁用以防误操作。