学习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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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
对javascript和select部件的结合运用
2006/10/09 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
php判断访问IP的方法
2015/06/19 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
js实现聊天对话框
2020/02/08 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python基础语言学习笔记总结(精华)
2017/11/14 Python
详解python中的线程与线程池
2019/05/10 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
大学毕业生自荐书怎么写?
2014/01/06 职场文书
中职生求职信
2014/07/01 职场文书
股份转让协议书范本
2015/01/27 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
Python requests用法和django后台处理详解
2022/03/19 Python