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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 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
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
js函数排序的实例代码
2013/07/01 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
简单的Python调度器Schedule详解
2019/08/30 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
《再别康桥》教学反思
2014/02/12 职场文书
车辆工程专业求职信
2014/06/14 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
楚门的世界观后感
2015/06/03 职场文书
入党培养人考察意见
2015/06/08 职场文书
合作合同协议书
2016/03/21 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技