详解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取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
jQuery构造函数init参数分析
May 13 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
js中开关变量使用实例
Feb 24 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
vue动态绑定class的几种常用方式小结
May 21 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
destoon二次开发入门示例
2014/06/20 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
关于js类的定义
2011/06/28 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
Node.js 的 GC 机制详解
2019/06/03 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
园林资料员岗位职责
2013/12/30 职场文书
初中生物教学反思
2014/01/10 职场文书
运动会四百米广播稿
2014/01/19 职场文书
养牛场项目建议书
2014/05/13 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
2015年预算员工作总结
2015/05/14 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang