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

下面这个案例,路人朋友们可以直接粘贴到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>Documenttitle>
    <script src="../../vue.js/vue.js">script>
  head>
  <body>
    <div id="app">
      <form @submit.prevent="submit">
        
        
        账号: <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>
        
        方向:前端<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>

你可能感兴趣的:(前端,vue.js,前端,javascript)