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 经典动画菜单效果代码
Jan 26 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
理解javascript封装
Feb 23 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
jquery实现图片轮播器
May 23 jQuery
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 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
杏林同学录(一)
2006/10/09 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php字符串截取函数用法分析
2014/11/25 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
php类自动加载器实现方法
2015/07/28 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
JavaScript 特殊字符
2007/04/05 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
layui使用label标签的方法
2019/09/14 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
浅谈python标准库--functools.partial
2019/03/13 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
寒假家长评语大全
2014/04/16 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
开学典礼策划方案
2014/05/28 职场文书
预备党员群众意见
2015/06/01 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
JavaScript前端面试组合函数
2022/06/21 Javascript