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 相关文章推荐
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
初识Javascript小结
Jul 16 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
原生JS轮播图插件
Feb 09 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
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中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
php生成二维码
2015/08/10 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
许愿墙中用到的函数
2006/10/07 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
python图片合成的示例
2020/11/09 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
化学相关工作求职信
2013/10/02 职场文书
学生自我鉴定范文
2013/10/04 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
迎元旦广播稿
2014/02/22 职场文书
大型活动组织方案
2014/05/10 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2015年推普周活动方案
2015/05/06 职场文书
党支部综合考察意见
2015/06/01 职场文书
优质护理心得体会
2016/01/22 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript