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. MySQL事务笔记

    1.结束事务的方法用什么? 2.事务的最终形态是什么? commit 提交 rollback 回滚 3.事务的四大特征? ⑴ 原子性 一个事务是最小的工作单元,事务包含的所有操作要么全部成功,要么全部 ...

  2. C#微信公众号开发--网页授权(oauth2.0)获取用户基本信息一

    前言 微信网页授权共分为两种方式:snsapi_base.snsapi_userinfo. snsapi_base需要关注公众号,获取用户信息时不弹出用户授权界面. snsapi_userinfo是在 ...

  3. 网络编程socket之一

    从今年10月22号开始我的python学习之路,一个月下来,磕磕碰碰,勉勉强强把基础部分算是学完了,一个月走过来,我过着别人看似单调,重复的生活,确实是,每天,每周都是一样的生活模式,早上7点40起床 ...

  4. nopCommerce 3.2新功能

    NopCommerce版本3.20,上周被释放,对于那些你谁还不熟悉新版本或刚经过脱脂发行说明我们的新功能的详细介绍. 在nopCommerce 3.20新功能的工作往往需要某些设置或语言资源的快速修 ...

  5. ASP.NET Core配置环境变量和启动设置

    在这一部分内容中,我们来讨论ASP.NET Core中的一个新功能:环境变量和启动设置,它将开发过程中的调试和测试变的更加简单.我们只需要简单的修改配置文件,就可以实现开发.预演.生产环境的切换. A ...

  6. 正则表达式--C#正则表达式的符号及例子

    正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. C#中经常会遇到要查找某一个字 ...

  7. 编写计算器程序学习JS责任链模式

    设计模式中的责任链模式能够很好的处理程序过程的逻辑判断,提高程序可读性. 责任链模式的核心在于责任链上的元素判断能够处理该数据,不能处理的话直接交给它的后继者. 计算器的基本样式: 通过div+css ...

  8. 【表格设置】HTML中合并单元格，对列组合应用样式，适应各浏览器的内容换行

    1.常用表格标签 普通    <table>           |           <tr>          |           |          <th ...

  9. 如何将一个HTML页面嵌套在另一个页面中

    一 在原页面嵌入其他页面 1.使用iframe框架 客户端页面嵌套可以使用iframe的方法,弊端是必须事先想好被嵌套的页面在首页中要占多大的位置. 如果被嵌套页面太大,超过事先定义的宽度或高度,则首 ...

  10. [PHP] 数据结构-输出链表倒数第k个结点PHP实现

    输入一个链表,输出该链表中倒数第k个结点.第一个指针走(k-1)步,到达第k个节点,两个指针同时往后移动,当第一个结点到达末尾的时候,第二个结点所在位置就是倒数第k个节点了 <?php clas ...