Vue表单控件数据绑定方法详解


Posted in Javascript onFebruary 05, 2020

基础用法

可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据

[注意]v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它会选择Vue实例数据来作为具体的值。应该通过JS组件的data选项中声明初始值

type:text

<div id="example">
 <input v-model="message" placeholder="edit me">
 <p>Message is: {{ message }}</p>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  message:''
 }
})
</script>

实际上v-model是:value和@input事件的语法糖

<div id="example">
 <input :value="message" placeholder="edit me" @input="message=$event.target.value">
 <p>Message is: {{ message }}</p>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  message:''
 },
})
</script>

textarea

<div id="example">
 <div>
  <span>Multiline message is:</span>
  <p style="white-space: pre-line">{{ message }}</p>  
 </div>
 <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  message:''
 }
})
</script>

[注意]在文本区域插值( <textarea></textarea> ) 并不会生效,应用 v-model 来代替

type:checkbox

<div id="example">
 <input type="checkbox" id="checkbox" v-model="checked">
 <label for="checkbox">{{ checked }}</label>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  checked:false
 }
})
</script>
<div id="example">
 <div>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label> 
 </div>
 <div>
  <span>Checked names: {{ checkedNames }}</span> 
 </div>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  checkedNames:[]
 }
})
</script>

type:radio

<div id="example">
 <div>
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>  
 </div>
 <div>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>  
 </div>
 <div>Picked: {{ picked }}</div>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  picked:''
 }
})
</script>

select

单选列表

<div id="example">
 <select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  selected: ''
 }
})
</script>

[注意]如果v-model表达初始的值不匹配任何的选项,<select>元素就会以”未选中”的状态渲染。在iOS中,这会使用户无法选择第一个选项,因为这样的情况下,iOS不会引发change事件。因此,像以上提供disabled选项是建议的做法

多选列表

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

动态选项

用v-for渲染

<div id="example">
 <select v-model="selected">
  <option v-for="option in options" :value="option.value">
   {{ option.text }}
  </option>
 </select>
 <span>Selected: {{ selected }}</span>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  selected: 'A',
  options: [
   { text: 'One', value: 'A' },
   { text: 'Two', value: 'B' },
   { text: 'Three', value: 'C' }
  ]
 }
})
</script>

绑定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>

但若要绑定value到Vue实例的一个动态属性上,就可以用v-bind实现,并且这个属性的值可以不是字符串

复选框

<div id="example">
 <input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">
 <span>{{ toggle }}</span>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  toggle:'',
  a:true,
  b:false
 }
})
</script>

单选按钮

<div id="example">
 <input type="radio" v-model="pick" :value="a">
 <span>{{ pick }}</span>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  pick:'',
  a:true
 }
})
</script>

选择列表

<div id="example">
 <select v-model="selected">
  <option :value="{ number: 123 }">123</option>
  <option :value="{ number: 234 }">234</option>
  <option :value="{ number: 345 }">345</option>
 </select>
  <span>Selected: {{ selected.number }}</span>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  selected:''
 }
})
</script>

修饰符

.lazy

在默认情况下, v-model在input事件中同步输入框的值与数据,但可以添加一个修饰符 lazy ,从而转变为在change事件中同步

下列例子中,光标移出输入框时,才同步数据

<div id="example">
 <input v-model.lazy="message" placeholder="edit me">
 <p>Message is: {{ message }}</p>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  message:''
 }
})
</script>

.number

如果想自动将用户的输入值转为Number类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符number给v-model来处理输入值

这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型

<div id="example">
 <div>
  <input v-model="age1" type="number">
  <span>{{type1}}</span>
  <p>普通输入: {{ age1 }}</p>  
 </div>
 <div>
  <input v-model.number="age2" type="number">
  <span>{{type2}}</span>
  <p>number修饰符输入: {{ age2 }}</p>  
 </div>
</div>
<script>
var example = new Vue({
 el: '#example',
 data:{
  age1:'',
  age2:'',
 },
 computed:{
  type1:function(){
   return typeof(this.age1)
  },
  type2:function(val){
   return typeof(this.age2)
  },
 }
})
</script>

.trim

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

<div id="example">
 <input v-model.trim="msg">
 <p>msg is: {{ msg }}</p>
</div>

<script>
var example = new Vue({
 el: '#example',
 data:{
  msg:''
 }
})
</script>

更多关于Vue表单控件数据绑定的方法请点击下面的相关链接

Javascript 相关文章推荐
jQuery中调用WebService方法小结
Mar 28 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
学习Angularjs分页指令
Jul 01 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 #Javascript
vue 翻页组件vue-flip-page效果
Feb 05 #Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 #Javascript
Vue中多元素过渡特效的解决方案
Feb 05 #Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 #Javascript
Vue的状态管理vuex使用方法详解
Feb 05 #Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 #Javascript
You might like
PHP之数组学习
2011/05/29 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
Python探索之Metaclass初步了解
2017/10/28 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
详解django.contirb.auth-认证
2018/07/16 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
行政部主管岗位职责
2013/12/28 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
如何写观后感
2015/06/19 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
pandas中对文本类型数据的处理小结
2021/11/01 Python