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 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
js querySelector() 使用方法
Dec 21 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
Vue关于数据绑定出错解决办法
May 15 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 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调用mysql存储过程
2007/02/14 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
Express.JS使用详解
2014/07/17 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python实现单词拼写检查
2015/04/25 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
python合并多个excel文件的示例
2020/09/23 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
四个太阳教学反思
2014/02/01 职场文书
技能比赛获奖感言
2014/02/14 职场文书
酒后驾车标语
2014/06/30 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
SQL Server中搜索特定的对象
2022/05/25 SQL Server