vue_表单控件
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_表单控件的更多相关文章
- “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型，或该类型未注册为安全类型。”
自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...
- MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件
类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...
- AnjularJS系列2 —— 表单控件功能相关指令
第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...
- 基于CkEditor实现.net在线开发之路（3）常用From表单控件介绍与说明
上一章已经简单介绍了CKEditor控件可以编写C#代码,然后可以通过ajax去调用,但是要在网页上面编写所有C#后台逻辑,肯定痛苦死了,不说实现复杂的逻辑,就算实现一个简单增删改查,都会让人头痛欲裂 ...
- Vue#表单控件绑定
使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...
- 了解HTML表单之13个表单控件
目录 传统控件 button select option optgroup textarea fieldset legend label 新增控件 datalist keygen output pro ...
- HTML5(常用的表单控件)
常用的HTML5的表单控件: Input 类型: color color 类型用在input字段主要用于选取颜色,如下所示: 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type ...
- wicket基础应用(2)--wicket表单控件的使用
该文可以转载,但转载必须注明作者,出处: 作者:lhx1026 出处:http://lhx1026.iteye.com/ 这一章介绍wicket表单控件的简单应用 1.Label控件 这个应该说是最常 ...
- Bootstrap系列 -- 18. 表单控件大小
前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...
随机推荐
- Java设计模式学习记录-命令模式
前言 这次要介绍的是命令模式,这也是一种行为型模式.最近反正没有面试机会我就写博客呗,该投的简历都投了.然后就继续看书,其实看书也会给自己带来成就感,原来以前不明白的东西,书上已经给彻底的介绍清楚了, ...
- Python和Java编程题(四)
1.题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身. 分析:只需要对三位数的数字进行循环(100~999),判断三 ...
- c++中虚析构函数
当指向基类的指针指向新建立的派生类对象而且基类和派生类都调用new向堆申请空间时,必须将基类的析构函数声明为虚函数,从而派生类的析构函数也为虚函数,这样才能在程序结束时自动调用它,从而将派生类对象申请 ...
- 一张 JVM 相关的思维脑图（4.4M）
楼主学习 JVM 总结的知识点,用思维脑图串起来,温故而知新,其中含有类加载器,内存布局,GC(右侧). 最多的就是 GC 的内容了. 内容有错误之处,还请指正. 大图地址
- 单机安装Hadoop
单机安装hadoop ------------------------------------------------------------------ 操作系统:centos7 64 位 hado ...
- 数据库编程Case when
数据库编程题 1. 姓名 日期 是否上班 张三 星期二 是 张三 星期三 是 李四 星期一 是 王五 星期二 是 张三 星期二 是 写出一条SQL语句输出下列结果 姓名 星期一 星期二 星期三 张三 ...
- 【nginx】详细配置说明
———————————————————————相关文章———————————————————————————— Centos之安装Nginx及注意事项 [Linux]nginx常用命令 ——————— ...
- Hash table lengths and prime numbers
Website:http://srinvis.blogspot.ca/2006/07/hash-table-lengths-and-prime-numbers.html This has been b ...
- OneMap Client API
MapSystem.Map.SmMap类 方法 mergerGeo:function(geoList) 将多个几何图形合并(支持面.线),组合成一个复合对象 例子: var geo=this.myMa ...
- Python 利用Python操作excel表格之xlwt介绍
利用Python操作excel表格之xlwt介绍 by:授客 QQ:1033553122 直接上代码 案例1 #!/usr/bin/env python # -*- coding:utf-8 ...