VUE.js中的页面表单使用演示代码，这个是在 nmp run dev，开发模式下的代码，但是页面使用的元素都类型，可以参照：

<template>
  <div>
    <form action="">
      <table>
        <tr>
          <th>标　　题</th>
          <th>内　　容</th>
        </tr>
        <tr>
          <td>姓　　名：</td>
          <td><input type="text" name="realname" v-model="formData.realname" /><span>输入的值：{{formData.realname}}</span></td>
        </tr>
        <tr>
          <td>性　　别：</td>
          <td>
            <label v-bind:for="'gender'+index" v-for="(item,index) in genders"><input type="radio" name="gender" v-bind:id="'gender'+index"  v-bind:value="item" v-model="formData.gender">{{item}}</label>

            <span>输入的值：{{formData.gender}}</span>
          </td>
        </tr>
        <tr>
          <td>兴　　趣：</td>
          <td>
            <label v-bind:for="'like'+key" v-for="(item,key ) in likes"><input type="checkbox" name="like[]" v-bind:id="'like'+key" v-bind:value="item" v-model="formData.like">{{item}}</label>
            <span>输入的值：{{formData.like}}</span>
          </td>
        </tr>
        <tr>
          <td>户　　籍：</td>
          <td>
            <select name="address" id="" v-model="formData.address">
              <option value="" disabled="disabled">请选择</option>
              <option  v-for="item in adressList" v-bind:value="item.text">{{item.text}}</option>
            </select>
            <span>输入的值：{{formData.address}}</span>
          </td>
        </tr>
        <tr>
          <td>自我介绍：</td>
          <td>
            <textarea name="content" id="" cols="30" rows="10" v-model="formData.content"></textarea> <span>输入的值：{{formData.content}}</span>

          </td>
        </tr>
        <tr>
          <td></td>
          <td><button @click="dosubmit()" type="button">提交</button></td>
        </tr>
      </table>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //初始化页面表单需要的数据
        formData: {
          realname: '',
          gender: '',
          like: [],
          address: '',
          content:''
        },
        genders:['男','女','非人类'],
        likes:['运动','游戏','影视','户外','购物','娱乐'], //喜欢的数据
        adressList:[  //地址
          {text:'广东',value:1},
          {text:'广西',value:2},
          {text:'湖南',value:3},
        ]

      }
    },
    methods:{
      //提交函数
      dosubmit(){
        console.log("FormData: " + JSON.stringify(this.formData));
      }
    }
  }
</script>

<style scoped>

  table tr>th:first-child,table tr>td:first-child{width:180px;}
  table td{text-align: left;}
  table th{text-align: left;}
  td>span{margin-left:20px;color:#888;}
</style>

页面结果如下：