Vue-表单提交

佚名 6年前 (2019-05-05) 随笔 288人围观抢沙发百度已收录

template

<form @submit.prevent="submitFrom">
<!-- 注册提交事件 .prevent 阻止表单的默认提交行为 -->
简单输入:
<input type="text" v-model="formData.name">
单选：
<input type="radio" v-model="formData.open" value="1"> 开
<input type="radio" v-model="formData.open" value="0"> 关
多选:
<input type="checked" v-model="formData.huolg"/> 火龙果
<input type="checked" v-model="formData.yezi"/> 椰子
下拉选择框:
<select v-model="formData.weidao">
<option value="xl">香辣</option>
<option value="ml">麻辣</option>
<option value="qt">清汤</option>
<option value="yy">鸳鸯</option>
</select>
<button type="submit" value="确定"></button>
</form>

script

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

export default {
    data() {
      return {
        formData: {
          name: "",
          opn: "",
          huolg: "",
          yezi: "",
          weidao: "",
        }
      };
    },
    methods: {
      submitFrom() {
        console.log(this.formData);
      }
    },
  }