详解vue表单——小白速看


Posted in Javascript onApril 08, 2018

一、基本用法

你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。

但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

一组代码,看完text、textarea、radio、checkbox、select的基本用法:

<div id="app7">
  <input type="text" v-model="message"><label>{{message}}</label></br>
  <textarea v-model="message1"></textarea><label>{{message1}}</label></br>
  <!--单选按钮在单独使用时,不需要v-model,直接使用v-bind 绑定一个布尔类型的值,为真时选中,为否时不选-->
  <input type="radio" :checked="picked"><label>单选按钮</label></br>
  <!--如果是组合使用来实现互斥选择的效果,就需要v-model 配合value来使用:-->
  <input type="radio" v-model="sex" value="boy"><label>男</label>
  <input type="radio" v-model="sex" value="girl"><label>女</label></br>
  <!--复选框使用数组类型的数据匹配-->
  <input type="checkbox" v-model="hobby" value="跑步"><label>跑步</label>
  <input type="checkbox" v-model="hobby" value="爬山"><label>爬山</label>
  <input type="checkbox" v-model="hobby" value="滑雪"><label>滑雪</label></br>
  <!--单选时的选择框,多选时加multiple属性就可以了-->
  <!--但我们一般都不用原生的这种下拉框,不美观,扩展功能也不好,一般会用插件或自己封装一个-->
  <select v-model="select">
   <option disabled value="">请选择</option>
   <option>html</option>
   <option value="js">javascript</option>
   <option>css</option>
  </select>
  <!--用 v-for 渲染的动态选项-->
  <select v-model="selected">
   <option v-for="option in options" :value="option.value">
    {{option.text}}
   </option>
  </select>
 </div>

var app7 = new Vue({
 el: '#app7',
 data:{
  message: '单行文本',
  message1: '多行文本',
  picked: true,
  sex: 'boy',
  hobby: ['爬山','滑雪'],
  select: 'css',
  selected: 'A',
  options: [
   { text: 'One', value: 'A' },
   { text: 'Two', value: 'B' },
   { text: 'Three', value: 'C' }
  ]
 }
});

二、值绑定

单选按钮、复选框和选择列表在单独使用或单选的模式下, v-model 绑定的值是一个静态字符串或布尔值, 但在业务中,有时需要绑定一个动态的数据, 这时可以用v-bind 来实现。

一组代码,看完表单常用radio、checkbox、select的值绑定:

<div id="app8">
  <!--单选按钮,利用value动态绑定,在选中时,app.picked === app.value, 值都是boy-->
  <input type="radio" v-model="picked" :value="value">
  <label>单选按钮</label>
  <p>{{picked}}</p>
  <p>{{value}}</p>

  <!--复选框,利用true-value与false-value动态绑定,勾选时,app.toggle == app.value1; 未勾选时,app.toggle == app.value2-->
  <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
  <label>复选框</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>

  <!--选择列表,当选中时,app.selected 是一个Object ,所以app.selected.number == 123-->
  <select v-model="selected">
   <option :value="{number:123}">123</option>
  </select>
  {{selected.number}}
 </div>

var app8 = new Vue({
 el: '#app8',
 data:{
  picked: false,
  value: 'boy',
  toggle: false,
  value1: 'a',
  value2: 'b',
  selected: ''
 }
});

三、修饰符

 与事件的修饰符类似, v-model 也有修饰符,用于控制数据同步的时机。

一组代码,看完常用修饰符lazy、number、trim

<div id="app9">
  <!-- .lazy:
  在输入框中, v-model 默认是在input 事件中同步输入框的数据(除了提示中介绍的中文输入法情况外),
  使用修饰符.lazy 会转变为在change 事件中同步,这时,message 并不是实时改变的,而是在失焦或按回车时才更新。-->
  <input type="text" v-model.lazy="message">
  <p>{{message}}</p>
  <!--.number:
  使用修饰符.number 可以将输入转换为Number 类型,否则虽然你输入的是数字,但它的类型其实是String ,比如在数字输入框时会比较有用-->
  <input type="text" v-model.number="number">
  <p>{{typeof number}}</p>
  <!-- .trim:
  修饰符.trim 可以自动过滤输入的首尾空格-->
  <input type="text" v-model="text">
  <p>{{text}}</p>
 </div>
var app9 = new Vue({
 el: '#app9',
 data:{
  message: '',
  number: '',
  text: ''
 }
});

总结

以上所述是小编给大家介绍的vue表单详解——小白速看,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
JQuery教学之性能优化
May 14 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
JS正则表达式验证中文字符
May 08 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 #Javascript
React Router v4 入坑指南(小结)
Apr 08 #Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 #Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 #Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 #Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 #Javascript
JS求Number类型数组中最大元素方法
Apr 08 #Javascript
You might like
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
js实现微博发布小功能
2017/01/12 Javascript
JS常用知识点整理
2017/01/21 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
js实现选项卡效果
2020/03/07 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python 实现多维数组转向量
2019/11/30 Python
python链表类中获取元素实例方法
2021/02/23 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
毕业设计计划书
2014/01/09 职场文书
公务员保密承诺书
2014/03/27 职场文书
信仰心得体会
2014/09/05 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP