【Vue】学习笔记-表单

数据双向绑定

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

@submit.prevent=“postData” prevent防止出现闪现

表单控件(在form中)

0.标签 label

1.文本输入框 input type=text

2.密码输入框 input type=password

3.下拉菜单 select option

4.单选框 input type=“radio”(两个) v-model="formData.sex(同一个值)

5.复选框 input type=“checkbox”(两个) v-model="formData.sikll(同一个值)

6.提交按钮 button

代码：

<template>
  <div id="app">
    <form @submit.prevent="postData">
      <!-- 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="篮球">篮球</option>
          <option value="足球">足球</option>
        </select>
      </div>
      <div>
        <label for="">性别</label>
        <label for="">男
          <input type="radio" value="男" v-model="formData.sex">
        </label>
        <label for="">女
          <input type="radio" value="女" v-model="formData.sex">
        </label>
      </div>
      <div>
        <label for="">技能：</label>
        <label for="">前端</label>
        <input type="checkbox" value="前端" v-model="formData.sikll" >
        <label for="">java</label>
        <input type="checkbox" value="java" v-model="formData.sikll">
      </div>

      <button>提交表单</button>
    </form>
    
  </div>
</template>

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

显示效果如下图

常见错误总结

radio类型的单选输入框，双向数据绑定时，需要绑定同一个数值，变量名定义需要后面加空字符串 " "