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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
AutoSave/自动存储功能实现
Mar 24 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
Vue实现路由跳转和嵌套
2017/06/20 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
python时间日期操作方法实例小结
2020/02/06 Python
浅析Python requests 模块
2020/10/09 Python
python压包的概念及实例详解
2021/02/17 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
中职生自荐信
2013/10/13 职场文书
四年的大学生生活自我评价
2013/12/09 职场文书
助理政工师申报材料
2014/06/03 职场文书
扬尘污染防治方案
2014/06/15 职场文书
记账会计岗位职责
2014/06/16 职场文书
品质标语大全
2014/06/21 职场文书
兽医医药专业求职信
2014/07/27 职场文书
买房协议书范本
2014/10/23 职场文书
理想国读书笔记
2015/06/25 职场文书
大学生村官入党自传
2015/06/26 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android