<form class="mian__form" @submit.prevent="submit">
    <ul>
        <li>
            <div class="form__til">企业名称</div>
            <div class="form__input">
                <input id="companyName" type="text" placeholder="" required v-model="userData.companyName">
           </div>
        </li>
       <li>

     <li>
           <div class="form__til">号码归属地</div> <div class="form__select select-two">
          <select name="tellPlace" id="tellPlace" required onchange="provincechange(this.selectedIndex)" v-model="userData.tellPlace">
               <option>请选择省份</option>
          </select> <br/>
         <select name="tellCity" id="tellCity" required v-model="userData.tellCity">
             <option>请选择城市</option>
        </select>
      </div>
  </li>

  

   <li>
     <div class="form__til">号码制式</div> <div class="form__select">
              <select id="tellFormat" v-model="userData.tellFormat" required>
                 <option value="TD-LTE/TD-SCDMA">TD-LTE/TD-SCDMA</option>
                 <option value="FDD-LTE/WCDMA">FDD-LTE/WCDMA</option>
                 <option value="TD-LTE/LTE FDD/CDMA2000">TD-LTE/LTE FDD/CDMA2000</option>
            </select>
   </div>
</li>
<li>
<button class="submit-btn" id="submitBtn" type="submit">提交</button>
</li>
 </ul>
</form>

js

  methods:{
       submit:function(){ var me = this; var data = JSON.stringify(me.userData); console.log(data);};
 }

vue 表单操作的更多相关文章

  1. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  2. Vue表单

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson11 一 vue表单 实在是太简单了,直接来个例子 <!DOC ...

  3. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  4. Vue表单绑定(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  5. vue 表单校验(二)

    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...

  6. 基于JQuery的前端form表单操作

    Jquery的前端表单操作:     jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...

  7. vue表单验证--veevalidate使用教程

    vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...

  8. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...

  9. vue表单校验(三)

    vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...

随机推荐

  1. I.MX6 MAC Address 导致的系统崩溃

    /**************************************************************************** * I.MX6 MAC Address 导致 ...

  2. POJ3617:Best Cow Line (贪心&&后缀数组)

    FJ is about to take his N (1 ≤ N ≤ 2,000) cows to the annual"Farmer of the Year" competiti ...

  3. [Usaco2013 DEC] Vacation Planning

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4093 [算法] 对于k个枢纽 , 分别在正向图和反向图上跑dijkstra最短路 , ...

  4. 使用webBrowse把网页word等转换成图片

    http://blog.csdn.net/zgke/article/details/3248497 使用 Bitmap MyImage = Test.GetControlScrollImage(new ...

  5. vue 生命周期钩子 过滤器 计算属性

    每一个Vue实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测.编译模板.挂载实例到DOM,然后在数据变化时更新DOM,在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了 ...

  6. c++性能测试工具:google benchmark入门(二)

    上一篇中我们初步体验了google benchmark的使用,在本文中我们将更进一步深入了解google benchmark的常用方法. 本文索引 向测试用例传递参数 简化多个类似测试用例的生成 使用 ...

  7. mysql 联合2个列的数据 然后呈现出来

    SELECT a.voyageNum,CONCAT(a.startDate,'~',a.endDate) AS 日期  FROM tchw_voyageoilcost a ,tchw_voyageoi ...

  8. Bootstrap中的字体图标

    使用 <span class="glyphicon glyphicon-th-large"> XX文字</span>引入字体图标.一般情况下文字放在span ...

  9. Extjs4 登陆界面

    原文地址:http://fengxinnl.iteye.com/blog/1950585 <script src="ext4.2/bootstrap.js" type=&qu ...

  10. Linux 常用命令七 grep

    一.grep命令 grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜 ...