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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
VUE脚手架具体使用方法
May 20 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
Vue实现购物车实例代码两则
May 30 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+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
微信小程序商品到详情的实现
2017/06/27 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
python获取代理IP的实例分享
2018/05/07 Python
python绘制多个曲线的折线图
2020/03/23 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
匡威德国官网:Converse德国
2019/01/26 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
优秀经理事迹材料
2014/02/01 职场文书
高一数学教学反思
2014/02/07 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
介绍信怎么写
2015/05/05 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
golang操作rocketmq的示例代码
2022/04/06 Golang