Vue-表单提交

最新推荐文章于 2024-09-14 07:19:13 发布

转载最新推荐文章于 2024-09-14 07:19:13 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yangchin9/p/10813305.html

文章标签：

#javascript #ViewUI

博客提及了template和script，可能与JavaScript相关，内容转载自https://www.cnblogs.com/yangchin9/p/10813305.html ，涉及信息技术领域前端开发方面。

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

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

转载于:https://www.cnblogs.com/yangchin9/p/10813305.html