【web网站】如何在vue中实现表单数据绑定【教程贴】

Web讲师-赵老师 发布于 2018/04/30 17:26
查看:67|回复:0

    在vue中绑定表单数据是非常高级且简单的,今天我们来学习vue中表单数据绑定;

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


单文本数据绑定

注意:绑定的数据名称首先要在data数据对象中进行声明;绑定数据用指令v-model;

<div id="app">
     <input v-model="message" placeholder="edit me">
     <p>Message is: {{ message }}</p>
 </div>
 <script>
     app=Vue({
         el:"#app",
         data:{
             message:""
         }
     });
 </script>

 

多个复选框数据绑定,方法基本与单行文本相同;

<div id="app">
     <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>
 </div>
 <script>
     app=Vue({
         el:"#app",
         data:{
             checkedNames:[]
         }
     });
 </script>

 

属性基本用法

        在默认情况下,v-model 在input 事件中同步输入框值与数据,可以添加一个特性lazy,input值发生改变时,不会同步到绑定的变量

<input type="text" v-model="msg" lazy>//input值发生改变,msg不变

 

debounce过滤器

<input @keyup="onKeyup | debounce 500">//只要操作键盘间隔小于0.5秒,就不会发生onKeyup事件。

 

以上就是本文的全部内容,希望对大家的学习有所帮助


查看点赞情况
全部点赞
总计: --
本贴还没有回复,赶紧来抢占沙发吧~
发布新贴
招版主啦

版主

  • 杨_宇 杨_宇
  • WEB前讲师-苏少强 WEB前讲师-苏少强
  • web讲师--何广森 web讲师--何广森
  • web前端讲师-闫华伟 web前端讲师-闫华伟
  • zacharyjoke zacharyjoke
  • Web讲师-李家靖 Web讲师-李家靖

注册有礼

完善以下信息,为你推荐课程

  • 学生
  • 白领
  • 高管
  • 自由职业
  • 其他
  • 工作需要
  • 自我提升
  • 兴趣爱好
  • 创业/转型
  • 其他
  • 小白
  • 了解
  • 熟悉
  • 精通
  • 其他
  • 高中/中专
  • 专科
  • 本科
  • 硕士
  • 其他
  • 影视枪战大片特效解析
  • 五步揭晓平面广告的奥秘
  • PS视觉惊悚课堂
  • 揭秘平均月薪过万的UI设计行业
  • 45天7千平方大厦变形记
  • 原画学习痛点技法全解析
  • 影视动画奇幻课堂
  • AI高端商业设计全攻略
  • UG职场生存必备指南
  • 日赚千元之新媒体行业揭秘
  • 创业营销实战训练营
出现异常