Vue表单输入绑定的示例代码


Posted in Javascript onNovember 01, 2018

基础用法

你可以用v-model指令在表单input,textarea以及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但是v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据。

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

(1) 文本

<input v-model="message" placehoder="edit me">

(2) 多行文本

<textarea v-model="message"></textarea>

(3) 复选框

单个复选框,绑定到布尔值:

<input type="checkbox" v-model="checked">

多个复选框,绑定到同一个数组:

<div id='example-3'>
 <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>
 <br>
 <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
 el: '#example-3',
 data: {
  checkedNames: []
 }
})

(4) 单选按钮

<div id="example-4">
 <input type="radio" id="one" value="One" v-model="picked">
 <label for="one">One</label>
 <br>
 <input type="radio" id="two" value="Two" v-model="picked">
 <label for="two">Two</label>
 <br>
 <span>Picked: {{ picked }}</span>
</div>

new Vue({
 el: '#example-4',
 data: {
  picked: ''
 }
})

(5) 选择框

单选时:

<div id="example-5">
 <select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
</div>

new Vue({
 el: '...',
 data: {
  selected: ''
 }
})

如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

多选时(绑定到一个数组)

<div id="example-6">
 <select v-model="selected" multiple style="width: 50px;">
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <br>
 <span>Selected: {{ selected }}</span>
</div>

new Vue({
 el: '#example-6',
 data: {
  selected: []
 }
})

值绑定

对于单选按钮,复选框以及选择框的选项,v-model绑定的值通常是静态字符串(对于复选框也可以是布尔值):

<!-- 当选中时,`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>

(1) 复选框

<input
 type="checkbox"
 v-model="toggle"
 true-value="yes"
 false-value="no"
>

这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性,因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交,(比如“yes”或“no”),请换用单选按钮。

(2) 单选按钮

<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a

修饰符

(1) .lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

(2) .number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符

(3) trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

示例:

// >>>>>>> html
  <div id="app" >
    <!-- 输入框绑定 -->
    <input v-model='massage' placeholder="输入信息" >
    <p>massage is:{{ massage }}</p>
    <hr>
    <!-- 单个选框绑定,返回值为布尔值 -->
    <p>单个选框绑定,返回值为布尔值:</p>
    <input v-model='radioStatus' type="checkbox" name="isAgree">
    <br>
    <label>数据:{{radioStatus}}</label>

    <hr>
    <!-- 多个选框绑定到同一个数据 -->
    <div>
      <p> 多个选框绑定同一个数据: </p>
      <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>
      <br>
      <!-- checkedNames 为一个数组 [] -->
      <span>数据: {{ checkedNames }}</span>         
    </div>
    <hr>
    <div>
      <p>单选按钮数据:</p>
      <input type="radio" id="one" value="1" v-model="sex"><label for="one">{{stantic.garder[1]}}</label>
      <input type="radio" id="two" value="2" v-model="sex"><label for="two">{{ stantic.garder[2] }}</label>
      <input type="radio" id="three" value="3" v-model="sex"><label for="three">{{ stantic.garder[3] }}</label>      
      <br>
      <!-- sex === 选中的input的value -->
      <span>性别代码: {{ sex }};性别:{{stantic.garder[sex]}}</span>
    </div>
    <hr>
    <div>
      <p>选择列表:</p>
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option value="001" >北京</option>
        <option value="003" >天津</option>
        <option value="008" >上海</option>
      </select>
      <span>Selected: {{ selected }}</span>    
    </div>
    <hr>
    <div>
      <h3>值绑定:</h3>
      <p>
        对于单选按钮,勾选框及选择列表选项,v-model 绑定的 value 通常是静态字符串 (对于勾选框是逻辑值): 
        <br>
        但是有时我们想绑定 value 到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串。

      </p>
      <!-- vm.toggle 和 vm.stantic.isOrNot 绑定 -->
      <label>是否毕业:</label>
      <input type="checkbox" name="" v-model='toggle' v-bind:true-value=stantic.isOrNot[1] v-bind:false-value=stantic.isOrNot[0] >
      <!-- 选中时 vm.toggle === stantic.isOrNot[1] 未选中时 vm.toggle === stantic.isOrNot[0] -->
      <p>您选择了:{{toggle}}</p>
      
      <h4>选择列表的值绑定字面量对象:</h4> 
      <select v-model="selected2">
        <!-- 内联对象字面量 -->
        <option v-bind:value="{ number: 123 }">123</option>
        <option v-bind:value="{ number: 456 }">456</option>
        <option v-bind:value="{ number: 789 }">789</option>
      </select>
      <span>vm.selected={{selected2}}</span>
    </div>
    <hr>
    <div>
      <h3>修饰符</h3>
      
      <h4>.lazy</h4>
      <p>在默认情况下,v-model 在 <mark>input</mark> 事件中同步输入框的值与数据 (除了 上述 IME 部分),但你可以添加一个修饰符 lazy ,从而转变为在 <mark>change</mark> 事件中同步:</p>
      <input v-model.lazy='massage' >
      <p>输入完成,信息改变:{{massage}}</p>
      
      <h4>.number</h4>
      <p>如果想自动将用户的输入值转为 Number 类型 (如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:</p>
      <!-- vm.age的值类型是Number -->
      <input type="number" v-model.number='age' >
      <span>类型为:{{ typeof age }}</span>

      <h4>.trim</h4>
      <p>如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:</p>
      <input v-model.trim='massage' > 
    </div>
  </div>
 

 //    >>>>>>js

  // 基础用法 v-model
  let vm = new Vue({
    el:'#app',
    data:{
      massage:'',
      radioStatus:false,
      checkedNames:[],
      sex:'',
      age:'',
      toggle:'',
      selected:'',
      selected2:'',
      stantic:{
        garder:{
          1:'男',
          2:'女',
          3:'不确定'
        },
        Hobbies:{

          1:'电影',
          2:'美食',
          3:'游戏',
          4:'科技'
        },
        isOrNot:{
          1:'是',
          0:'否'
        }
      }
    }

  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
flexigrid 参数说明
Nov 23 Javascript
js实现目录定位正文示例
Nov 14 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
浅谈Angular 观察者模式理解
Nov 01 #Javascript
详解vuex状态管理模式
Nov 01 #Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 #Javascript
Vue.js 事件修饰符的使用教程
Nov 01 #Javascript
微信小程序实现蒙版弹窗效果
Nov 01 #Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 #Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 #Javascript
You might like
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
python实现简单登陆系统
2018/10/18 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
详解python中index()、find()方法
2019/08/29 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
html5 视频播放解决方案
2016/11/06 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
欢迎横幅标语
2014/06/17 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
2014年卫生工作总结
2014/11/27 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
黑白记忆观后感
2015/06/18 职场文书
给朋友的赠语
2015/06/23 职场文书
《火烧云》教学反思
2016/02/23 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS