Vue.js中提供 v-model 的指令对表单元素进行双向数据绑定，在修改表单元素值的同时，实例 vm 中对应的属性值也同时更新，反之亦然。本小节介绍主要input元素绑定v-model 后的具体用法和处理方式，实例所依赖的js代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="lib/bootstrap.min.css">

  <script src="lib/jquery-1.7.2.js"></script>

  <script src="lib/bootstrap.js"></script>

  <script src="vue2.0.js"></script>

    <script src="vue-resource.js"></script>

    <script>

        window.onload = function(){

            var vm = new Vue({

                el : '.container',

                data : {

                    message:'',

                    picked:'Runoob',//radio 默认选择男

                    checked:'',

                    multiChecked:[],

                    selected:'A', //option 默认选择A

                    multiSelected:[]

                },

                methods:{

                    add:function(){

                        // alert(this);

                        //添加数据到数组里面

                        this.myData.push({

                            name : this.username,

                            age : this.age,

                        });

                        //添加完后清空input

                        this.username = '';

                        this.age = '';

                    },

                    deletMsg : function(n){

                        if(n == -2){

                            this.myData = [];

                        }else{

                            this.myData.splice(n,1);//删除某一条数据

                        }

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div class="container">

        <form role="form">

            <div class="form-group">

                <h2>1. Text 输入框示例</h2>

                <input type="text"  class="form-control"  v-model="message">

                <span>Your input is : {{ message }}</span>

            </div>

            <div class="form-group">

                <h2>2. Radio 单选框示例</h2>

                <input type="radio" id="runoob" value="Runoob" v-model="picked">

                <label for="runoob">Runoob</label>

                <br>

                <input type="radio" id="google" value="Google" v-model="picked">

                <label for="google">Google</label>

                <br>

                <span>选中值为: {{ picked }}</span>

                <!-- picked值为选中的radio元素的value值 -->

            </div>

            <div class="form-group">

                <h2>3.Checkbox </h2>

                <h4>Checkbox 分两种情况：单个勾选和多个勾选框</h4>

                <h5>单个勾选框：v-model即为布尔值，此时input的value并不影响v-model的值</h5>

                <input type="checkbox" v-model="checked">

                <span>checked:{{ checked }}</span>

                <h5>多个勾选框：v-model使用相同的属性名称，此属性为数组</h5>

                <label for=""><input type="checkbox" value="1" v-model="multiChecked">1</label>

                <label for=""><input type="checkbox" value="2" v-model="multiChecked">2</label>

                <label for=""><input type="checkbox" value="3" v-model="multiChecked">3</label>

                <label for=""><input type="checkbox" value="4" v-model="multiChecked">4</label>

                <label for=""><input type="checkbox" value="5" v-model="multiChecked">5</label>

                <label for=""><input type="checkbox" value="6" v-model="multiChecked">6</label>

                <p>MultiChecked : {{ multiChecked.join(',') }}</p>

            </div>

            <div class="form-group">

                <h2>4. Select</h2>

                <h4>Select 分两种情况：单选和多选，多选的时候需要绑定到一个数组</h4>

                <h5>单选：</h5>

                <select name="" id="" v-model="selected">

                    <option value="A">A</option>

                    <option value="B">B</option>

                    <option value="C">C</option>

                </select>

                <span>Selected: {{ selected }}</span>

                <h5>多选：</h5>

                <select name="" id="" v-model="multiSelected" multiple>

                    <option value="A">A</option>

                    <option value="B">B</option>

                    <option value="C">C</option>

                    <option value="D">D</option>

                    <option value="E">E</option>

                    <option value="F">F</option>

                </select>

                <span>Selected: {{ multiSelected }}</span>

            </div>

        </form>

    </div>

</body>

</html>

vue_表单控件的更多相关文章

  1. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型，或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  2. MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件

    类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...

  3. AnjularJS系列2 —— 表单控件功能相关指令

    第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...

  4. 基于CkEditor实现.net在线开发之路（3）常用From表单控件介绍与说明

    上一章已经简单介绍了CKEditor控件可以编写C#代码,然后可以通过ajax去调用,但是要在网页上面编写所有C#后台逻辑,肯定痛苦死了,不说实现复杂的逻辑,就算实现一个简单增删改查,都会让人头痛欲裂 ...

  5. Vue#表单控件绑定

    使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...

  6. 了解HTML表单之13个表单控件

    目录 传统控件 button select option optgroup textarea fieldset legend label 新增控件 datalist keygen output pro ...

  7. HTML5(常用的表单控件)

    常用的HTML5的表单控件: Input 类型: color color 类型用在input字段主要用于选取颜色,如下所示: 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type ...

  8. wicket基础应用(2)--wicket表单控件的使用

    该文可以转载,但转载必须注明作者,出处: 作者:lhx1026 出处:http://lhx1026.iteye.com/ 这一章介绍wicket表单控件的简单应用 1.Label控件 这个应该说是最常 ...

  9. Bootstrap系列 -- 18. 表单控件大小

    前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...

随机推荐

  1. 常见HTTP状态码及URL编码表

    常见HTTP状态码 1xx: 信息          (用于表示临时响应并需要请求者执行操作才能继续的状态代码) 消息: 描述: 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有 ...

  2. FFmpeg封装格式处理3-复用例程

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10506653.html FFmpeg封装格式处理相关内容分为如下几篇文章: [1]. F ...

  3. JWT的相关讲解

    原文链接: http://www.cnblogs.com/chenwolong/p/Token.html

  4. 初识SqlLite ---.net连接数据库

    Sqlite 是一款轻量级的关系型数据库,以小巧和嵌入式闻名.以前只是听说,现在终于忍不住要尝试下.本文的初衷是为.net平台的使用者提供帮助. Sqlite有专门为VS2010开发的程序包,大家可以 ...

  5. jquery中innerwidth，outerwidth，outerwidth和width的区别

    在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...

  6. 试图加载格式不正确的程序 .net

    一般是dll位数不对,重新编译一下即可

  7. Android开发——使用自带图标

    Android其实也是自带有许多常用的图标,我们直接使用即可 在源代码*.Java中可以进入如下方式引用: myMenuItem.setIcon(android.R.drawable.ic_menu_ ...

  8. 【Java深入研究】1、object类

    一.概述Object类是所有Java类的祖先.每个类都使用 Object 作为超类.所有对象(包括数组)都实现这个类的方法. 参考英文:* Class {@code Object} is the ro ...

  9. mysql之Navicat工具、pymysql模块

    1. IDE工具介绍(Navicat) 为了方便测试,使用IDE工具,就是Navicat,这个工具本质上就是一个socket客户端,可视化的连接mysql服务端的一个工具,并且是图形界面版的.它和直接 ...

  10. 【读书笔记】iOS-开发者证书

    虽然使用通配符听起来很赞,但问题是使用这种App ID的应用无法使用苹果的Push Notification服务以及应用内支付服务. 如果你有钱的话,建议单独买一个设备用于开发,将来你可能会安装iOS ...