gitHub地址: https://github.com/manlili/vue_learn里面lesson11

一 vue表单

实在是太简单了,直接来个例子

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Vue表单</title>
  6.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  8.     </head>
  9.     <body>
  10.         <div class="test">
  11.             <!--输入框-->
  12.             <input type="text" v-model="msg"> <br />
  13.  
  14.             <!--单选框-->
  15.             <input id="mycb1" type="radio" v-model="choose1">
  16.             <label for="mycb1">{{choose1}}</label>
  17.  
  18.             <!--复选框-->
  19.             <input id="mycb2" type="checkbox" v-model="choose2">
  20.             <label for="mycb2">{{choose2}}</label>
  21.  
  22.             <!--Select-->
  23.             <select v-model="selected">
  24.               <option>A</option>
  25.               <option>B</option>
  26.               <option>C</option>
  27.             </select>
  28.             <span>选中: {{ selected }}</span>
  29.  
  30.         </div>
  31.         <script type="text/javascript">
  32.             var vm = new Vue({
  33.                 el: ".test",
  34.                 data: {
  35.                     msg: '我是文本',
  36.                     choose1: false,
  37.                     choose2: false,
  38.                     selected:''
  39.                 }
  40.             })
  41.         </script>
  42.     </body>
  43. </html>

Vue表单的更多相关文章

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

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

  2. Vue表单控件绑定

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

  3. Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）

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

  4. vue 表单校验（二）

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

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

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

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

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

  7. vue表单校验（三）

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

  8. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

  9. vue 表单校验报错 "Error: please transfer a valid prop path to form item!"

    vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...

随机推荐

  1. ASP - MSXML2.ServerXMLHTTP & HTTPS & 证书过期 — msxml3.dll '80072f05'

    Error: msxml3.dll  '80072f05' The date in the certificate is invalid or has expired Dim xmlhttp Set ...

  2. mongo3.x ssl版安装文件

    搞c++好郁闷就是编译驱动.我都编疯了.虽然是按着教程走,但有时不同版本的机器有时各种奇奇原因莫妙奇妙编出问题.FQ出去啃英文解决的好吃力. 本来想更新一下项目的mongo从2.x 升级到3.x,然后 ...

  3. [原]编译Android源码过程中遇到的问题

    编译Android源码的过程参考Android官网介绍: 1.下载Android源码的步骤:https://source.android.com/source/downloading.html 2.编 ...

  4. 【MSDN原版】Windows 7 with SP1各版本下载

    Windows 7 Ultimate with Service Pack 1简体中文旗舰版:Windows 7 Ultimate with Service Pack 1 (x86) - DVD (Ch ...

  5. c# 无法引用自己创建的类库

    今个测试一个项目,居然无法引用自己创建的类库,我很费解,然后各种测试,修改修饰符,更改强类型,各种测试,最后无聊点开类库的属性  发现居然需要引用的项目与被引用的类库的框架不一样,修改了之后就可以正常 ...

  6. UBUNTU上的GIT SERVER

    Git是一个开源的版本控制系统,由Linus Torvalds主导,用于支持Linux内核开发.每一个Git工作目录,都是一个完整的代码库,包含所有的提交历史.有能力跟踪所有的代码版本,而不会去依赖于 ...

  7. [python]在场景中理解装饰器

    原来我也自己通过查资料,来学习python的装饰器,但是效果不好.因为没有接触过需要用到装饰器的场景,所以 一起的资料都只停留在纸面上,但是今天偶然看到了vimer的这篇文章:http://www.v ...

  8. [Python]同是新手的我，分享一些经验

    本来想分享一些知识,但是发现,写着写着,感觉分享一些经验,或许会少让大家走一些弯路,索性就把标题一改. 我不是教给大家些什么,我没有资格,我也是摸着石头过河,我只是本着分享的精神,在这里分享自己的东西 ...

  9. Android学习笔记(第一篇)编写第一个程序Hello World+Activity

    PS:终于开始正式的搞Android了...无人带的一介菜鸟,我还是自己默默的努力吧... 学习内容: 1.编写第一个Hello World程序..   学习Android,那么就需要有一个编译器来集 ...

  10. 终极事务处理（XTP，Hekaton）——万能大招？

    在SQL Server 2014里,微软引入了终极事务处理(Extreme Transaction Processing),即大家熟知的Hekaton.我在网上围观了一些文档,写这篇文章,希望可以让大 ...