Vue学习笔记之表单输入控件绑定


Posted in Javascript onSeptember 05, 2017

表单输入绑定

基础用法

文本

<input v-model:"msg" placeholder="edit me"/>

### 多行文本

<textarea name="" id="" cols="30" rows="10" v-model:"msg"></textarea>

### 复选框

爱好

<input type="checkbox" value="看电影" v-model="checked"/>
<input type="checkbox" value="打游戏" v-model="checked"/>
<input type="checkbox" value="音乐" v-model="checked"/>
{{ checked }} 

var vm=new Vue({
   el:'#app',
   date:{
    checked:[]
   },

单选按钮

性别

<input type="radio" value="男" v-model="picked"/>男
<input type="radio" value="女" v-model="picked"/>女
{{picked}} 

var vm=new Vue({
 el:'#app',
 date:{
  picked: ''
 },

选择列表

单选列表

户口    

<select v-model="selected">
 <option disabled value="">请选择</option>
 <option>河北</option>
 <option>山西</option>
 <option>北京</option> 
 </select>
{{ selected }} 

var vm=new Vue({
 el:'#app',
 date:{
  selected:'',
 },

多选列表(绑定到一个数组):

<div id="example-6">
 <select v-model="selected" multiple style="width: 50px">
 <option>A</option>
 <option>B</option>
 <option>C</option>
 </select>
 <br>
 <span>Selected: {{ selected }}</span>
</div> 
new Vue({
 el: '#example-6',
 data: {
 selected: []
 }
})

绑定 value

对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):

<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中时,`selected` 为字符串 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

复选框

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b"
> 

// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

单选按钮 

<input type="radio" v-model="pick" v-bind:value="a"> 

// 当选中时
vm.pick === vm.a

选择列表设置

<select v-model="selected">
 <!-- 内联对象字面量 -->
 <option v-bind:value="{ number: 123 }">123</option>
</select> 

// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

.lazy

在默认情况下, v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分),但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:

{{msg}}
<input type="text" v-model.lazy:"msg"/>

.number

如果想自动将用户的输入值转为 Number 类型,可以添加一个修饰符 number 给 v-model 来处理输入值:

{{num1}}
<input type="text" v-model.number:"num1"/> 
{{num2}}
<input type="text" v-model.number:"num2"/> 

{{num1+num2}} 

var vm=new Vue({
 date:{
  num1:1,
  num2:1
 },
});

.trim

如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:

{{msg}}
<input type="text" v-model.lazy.trim:"msg"/>

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

Javascript 相关文章推荐
JavaScript插件化开发教程 (二)
Jan 27 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
Javascript之String对象详解
Jun 08 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
JS实现商品筛选功能
Aug 19 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
js闭包学习心得总结
Apr 17 Javascript
JS实现可视化文件上传
Sep 08 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 #Javascript
纯js实现画一棵树的示例
Sep 05 #Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 #Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 #Javascript
对于Javascript 执行上下文的全面了解
Sep 05 #Javascript
JS一个简单的注册页面实例
Sep 05 #Javascript
基于react组件之间的参数传递(详解)
Sep 05 #Javascript
You might like
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
python引用DLL文件的方法
2015/05/11 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
python实现Floyd算法
2018/01/03 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
迟到检讨书大全
2014/01/25 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
上课迟到检讨书
2014/02/19 职场文书
公司承诺书格式
2014/05/21 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
公司管理制度范本
2015/08/03 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python