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 学习笔记(onchange等)
Nov 14 Javascript
js中小数转换整数的方法
Jan 26 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 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数据访问之查询关键字
2016/05/09 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python自动生产表情包
2017/03/17 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
创建Django项目图文实例详解
2019/06/06 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
python实现自动打卡的示例代码
2020/10/10 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
如何启动时不需输入用户名与密码
2014/05/09 面试题
殡葬服务心得体会
2014/09/11 职场文书
学习心理学的体会
2014/11/07 职场文书
中秋节慰问信
2015/02/15 职场文书
升学宴祝酒词
2015/08/11 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
MySQL分区表管理命令汇总
2022/03/21 MySQL