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. 微信小程序开发总结（一）

    微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...

  2. 朴素贝叶斯分类器及Python实现

    贝叶斯定理 贝叶斯定理是通过对观测值概率分布的主观判断(即先验概率)进行修正的定理,在概率论中具有重要地位. 先验概率分布(边缘概率)是指基于主观判断而非样本分布的概率分布,后验概率(条件概率)是根据 ...

  3. shell的编程结构体(函数、条件结构、循环结构)

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 1.1 shell函数 在shell中,函数可以被当作命令一样 ...

  4. ABP框架

    https://aspnetboilerplate.com/ https://aspnetboilerplate.com/Pages/Documents http://www.cnblogs.com/ ...

  5. Linux中ls命令用法

    ls 命令的含义是list显示当前目录中的文件名字.注意不加参数它显示除隐藏文件外的所有文件及目录的名字. 1)ls –a 显示当前目录中的所有文件,包含隐藏文件 命令: aijian.shi@U-a ...

  6. asp.net 获取网站根地址

    public static string GetSiteRoot() { string port = System.Web.HttpContext.Current.Request.ServerVari ...

  7. opoa介绍

    一 定义      One Page, One Application(后面缩写为OPOA,或者1P1A), 含义很简单:一个页面就是一个应用.不再使用iframe, 页面提交不能再使用submit方 ...

  8. httpclient请求服务的各种方法实例

    <!--话不多说,直接上代码--> import com.csis.ConfigManagerimport com.csis.io.web.DefaultConfigItemimport ...

  9. WPF通过附加属性控制窗口关闭

    场景1 当使用 ShowDialog() 方式显示窗口时,通过定义附加属性的方式可实现在 ViewModel 中进行数据绑定(bool?)来控制子窗口的显示和关闭 public class ExWin ...

  10. MVC中返回json数据的两种方式

    MVC里面如果直接将数据返回到前端页面,我们常用的方式就是用return view(): 那么我不想直接用razor语法,毕竟razor这玩意儿实在是太难记了,还不如写ajax对接来得舒服不是 那么我 ...