学习vue.js表单控件绑定操作


Posted in Javascript onDecember 05, 2016

本文实例为大家分享了vue.js表单控件绑定的具体代码,供大家参考,具体内容如下

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件绑定</title>
</head>
<body>
<!-- v-model在表单控件元素上实现数据的双向绑定 -->
<div id="app-1">
<input type="text" v-model="message" placeholder="请输入">
<p>{{message}}</p>
</div>

<!-- 单个勾选框 -->
<div id="app-2">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<!-- 多个勾选框绑定到同一数组 -->
<div id="app-3">
<input type="checkbox" id="checkboxjack" v-model="checkedNames" value="Jack">
<label for="checkboxjack">Jack</label>
<input type="checkbox" id="checkboxJohn" v-model="checkedNames" value="John">
<label for="checkboxJohn">John</label>
<input type="checkbox" id="checkboxMike" v-model="checkedNames" value="Mike">
<label for="checkboxMike">Mike</label>
<span>我是{{checkedNames}}</span>
</div>

<!-- 单选框 -->
<div id="app-4">
<input type="radio" id="man" value="man" v-model="sex">
<label for="man">man</label>
<input type="radio" id="woman" value="woman" v-model="sex">
<label for="woman">woman</label>
<span>选择的时是{{sex}}</span>
</div>

<!-- 单选列表 -->
<div id="app-5">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>我是{{selected}}</span>
</div>

<!-- 多选列表 绑定到数组-->
<div id="app-6">
<select v-model='selected' multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>我选择了{{selected}}</span>
</div>

<!-- 动态选项用v-for渲染 通过v-bind绑定value-->
<div id="app-7">
<select v-model='selected'>
<option v-for="item in items" v-bind:value="item.value">
{{item.text}}
</option>
</select>
<!-- v-model后的selected必须出现在data中 -->
<span>选择的是{{selected}}</span>
</div>

<!-- 在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步: -->

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

<!-- 如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值: -->
<input v-model.number="age" type="number">
<!-- 这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。.trim如果要自动过滤用户输入的首尾空格,可以添加.trim 修饰符到 v-model 上过滤输入: -->
<input v-model.trim="msg">

 

<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>

</body>
</html>

js:

var app1=new Vue({
el:'#app-1',
data:{
message:'开始'
}
});
var app2=new Vue({
el:'#app-2',
data:{
checked:false
}
});
var app3=new Vue({
el:'#app-3',
data:{
checkedNames:[]
}
});
var app4=new Vue({
el:'#app-4',
data:{
sex:''
}
});
var app5=new Vue({
el:'#app-5',
data:{
selected:''
}
});
var app6=new Vue({
el:'#app-6',
data:{
selected:[]
}
});
var app7=new Vue({
el:'#app-7',
data:{
selected: 'A',
items:[
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
JavaScript易错知识点整理
Dec 05 #Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 #Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 #Javascript
bootstrap快速制作后台界面
Dec 05 #Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 #Javascript
浅谈js数组和splice的用法
Dec 04 #Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 #Javascript
You might like
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
PHP简单日历实现方法
2016/07/20 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
python读写csv文件方法详细总结
2019/07/05 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
利用python进行文件操作
2020/12/04 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
党建工作汇报材料
2014/12/24 职场文书
英语感谢信范文
2015/01/20 职场文书
应聘教师求职信范文
2015/03/20 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
人力资源部工作计划
2019/05/14 职场文书