一个基础但全面的Vue的表单范例，很基础，但是很容易，也很全面。

本文链接：https://blog.youkuaiyun.com/weixin_42595747/article/details/132288690

本文介绍了一个基础的Vue.js表单示例，包括文本输入、密码输入、选择器、复选框和多选框，展示了如何使用v-model实现数据双向绑定。适合初学者了解Vue在HTML中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面这个案例，路人朋友们可以直接粘贴到html文件类型中运行，注意引入Vuejs的路径即可，不会改的可以参考我第一篇Vue入门，同时建议同志们手打，真的前端都不能熟能生巧，既不要编程了，
可以详细看注释，这是一个Vue的表单，基本涵盖了大部分内容，美观的话没有考虑css，后续可以考虑引入第三方插件，譬如阿里巴巴矢量库，Echarts或者其他的UI设计师。
书山有路勤为径，学海无涯苦作舟，看到尤雨溪大佬每天的工作，我就打了鸡血，要向他学习！！！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../vue.js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <form @submit.prevent="submit">
        <!-- 表单由三部分组成，表单的条件函数，input框由用户输入，其中input框可以设置类型，并且v-model进行bind -->
        <!-- input 有三种类型，一种是用户自己输入，一种是checkbox，它的value值有两种，一种是true，一种是false，第三个是radio，他是一个圆形的复选框 -->
        账号: <input type="text" v-model="userInfo.username"><br>
        密码: <input type="password" v-model="userInfo.password"><br>
        手机号： <input type="number" v-model="userInfo.phoneNumber"><br>
        性别：男<input type="radio" value="male" v-model="userInfo.sex"> 女 <input type="radio" value="female" v-model="userInfo.sex"> <br>
        <!-- 思考为什么要是数组，因为我们value值是同useInfo.direction绑定的，他是v-model的双向绑定，一定变化会引起其他三个都变化，即一个选中，其他三个都会选中 -->
        方向：前端<input type="checkbox" value="前端" v-model="userInfo.direction"> 后端<input type="checkbox" value="后端" v-model="userInfo.direction"> 测试 <input type="checkbox" value="测试" v-model="userInfo.direction"> <br>
        地区: <select name="" id="" v-model="userInfo.city">
          <option value="">请选择地区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="guangzhou">广州</option>
          <option value="shenzhen">深圳</option>
          <option value="hangzhou">杭州</option>
          <option value="suzhou">苏州</option>
          <option value="ningbo">宁波</option>
          <option value="xiongan">雄安</option>
        </select><br>
        备注 <textarea v-model="userInfo.back"></textarea>
        <br>
        <input type="checkbox" v-model="userInfo.agree">请阅读并接受<a href="https://xdclass.net">用户协议</a>
        </form>
      </div>
      <script>
        Vue.config.productionTip=false;
        let vm=new Vue({
          el:'#app',
          data:{
            userInfo:{
              username:'',
              password:'',
              phoneNumber:'',
              city:"",
              direction:[],
              sex:"",
              back:'',              
              agree:''
            },
          },
          methods: {
            submit(){
              console.log("提交表单数据")
            }
          },
        })
      </script>

  </body>
</html>