Web前端vue必做笔记之一：vue中的表单

最新推荐文章于 2025-02-07 09:00:00 发布

原创最新推荐文章于 2025-02-07 09:00:00 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文详细介绍了Vue.js中如何利用v-model实现数据双向绑定，包括在文本输入框、密码框、选择框、复选框及单选按钮中的应用。通过示例代码展示了如何创建表单，并在表单提交时使用`@submit.prevent`阻止默认行为，以AJAX方式提交数据。此外，还涵盖了表单中不同类型的输入元素与v-model的配合使用。

Web前端vue必做笔记之一：vue中的表单

数据双向绑定
通过v-model指令在文本输入框中创建双向数据绑定

<template>
  <div>
    <p>vue实现表单</p>
    <!-- <h1>{{message}}</h1> -->

    <form @submit.prevent="postData">
      <!--prevent 取消表单的默认行为 -->
      <!-- ajax实现表单的提交 -->
      <div>
        <label for="">用户名：</label>
        <input type="text" v-model="formData.username" />
      </div>

      <div>
        <label for="">密码：</label>
        <input type="password" v-model="formData.password" />
      </div>
      <div>
        <label for="">爱好：</label>
        <select v-model="formData.hobby">
          <option value="basketball">篮球</option>
          <option value="football">足球</option>
        </select>
      </div>
      <div>
        <label for="">性别</label>
        <label for="">男</label>
        <input type="radio" value="男" v-model="formData.sex" />
        <label for="">女</label>
        <input type="radio" value="女" v-model="formData.sex" />
      </div>
      <div>
        <label for="">技能:</label>
        <label for="">前端</label>
        <input type="checkbox" value="前端" v-model="formData.skill" />
         <label for="">java</label>
        <input type="checkbox" value="java" v-model="formData.skill"/>
      </div>
      <button>提交表单</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: "",
        password: "",
        hobby: "",
        sex: "",
        skill:[]
      },
    };
  },
  methods: {
    postData() {
      console.log(this.formData);
    },
  },
};
</script>