学习笔记-表单| 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第4天

数据双向绑定

通过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类型的单选输入框，双向数据绑定时，需要绑定同一个数值，变量名定义需要后面加空字符串 " "