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

一 vue表单

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Vue表单</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            <!--输入框-->

            <input type="text" v-model="msg"> <br />

            <!--单选框-->

            <input id="mycb1" type="radio" v-model="choose1">

            <label for="mycb1">{{choose1}}</label>

            <!--复选框-->

            <input id="mycb2" type="checkbox" v-model="choose2">

            <label for="mycb2">{{choose2}}</label>

            <!--Select-->

            <select v-model="selected">

              <option>A</option>

              <option>B</option>

              <option>C</option>

            </select>

            <span>选中: {{ selected }}</span>

        </div>

        <script type="text/javascript">

            var vm = new Vue({

                el: ".test",

                data: {

                    msg: '我是文本',

                    choose1: false,

                    choose2: false,

                    selected:''

                }

            })

        </script>

    </body>

</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. 电商O2O-11种最佳运营模式

    免费模式,是在这种矛盾下应运而生的新型模式.免费模式在未来的几年中,将会不断的渗透到各个行业中,这不单单是加速了行业内部的洗牌速度,更是加速了行业之间的洗牌速度. 未来,免费模式会让行业之间的界限变得 ...

  2. [原]零基础学习在Android进行SDL开发系列文章

    [原]零基础学习SDL开发之移植SDL2.0到Android [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图 [原]零基础学习SDL开发之在Android使用SDL2.0显示 ...

  3. ODBC连接问题

    http://zhidao.baidu.com/link?url=EPEMTuGC1q5wWavZigWseoHOwRLvpHyAVsdIgMLspErJOUZMEepIICUnT9IdkPQlYTm ...

  4. jQuery手机端上拉刷新下拉加载更多页面

    基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  5. 关于win7和xp的屏设置类

    DisplayInfo.h #pragma once enum WinVerDef { WIN_VER_UNKNOWN = -, WIN_VER_95 = , WIN_VER_98, WIN_VER_ ...

  6. Android版Ftp服务端软件

    分享一款开发的Android版Ftp服务端软件,支持Android4.0及以上版本,可以实现局域网无线传输文件到手机,或者把手机上的多媒体文件分享到iPad等设备来扩展这些设备的存储空间,详情请见软件 ...

  7. Web开发入门疑问收集(不定期更新)

    bootstrap container和container-fluid的区别 原始链接 container 根据显示设备满足的最小宽度,来决定实际内容宽度,是一个根据设置内容阶梯式响应的布局. 例子: ...

  8. 从零开始Grunt

    [20141025]从0开始Grunt *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom ...

  9. DDD：谈谈数据模型、领域模型、视图模型和命令模型

    背景 一个类型可以充当多个角色,这个角色可以是显式的(实现了某个接口或基类),也可以是隐式的(承担的具体职责和上下文决定),本文就讨论四个角色:数据模型.领域模型.视图模型和命令模型. 四个角色 数据 ...

  10. OpenGL开发环境配置-Windows/MinGW/Clion/CMake

    因为某些原因,不想用过于臃肿的VS了,转而使用常用的jetbrains的CLion,Clion沿袭了jetbrans的优良传统,基本代码提示功能还是比较好的,不过就是对于windows不熟悉cmake ...