Vue 处理表单input单行文本框的实例代码


Posted in Javascript onMay 09, 2019

用vue监听单行文本框是最最最容易的事。

只需用到 v-model 就能监听。

<template>
 <div id="app">
 <input type="text" v-model="msg">
 <p>{{msg}}</p>
 </div>
</template>

<script>
export default {
 name: 'app',
 data () {
 return {
  msg: ''
 }
 }
}
</script>

在 data 里面创建一个 msg 变量,用来存储输入框的输入的内容。

在 input 用 v-model 绑定 msg 。

这时输入框输入的所有内容,都会实时更新到 msg 里。

所以 <p> 标签里的内容也会实时更新输入框所输入的内容。

Vue 处理表单input单行文本框的实例代码

如上图所示。

需要注意的是,用了 v-model 后,输入框在输入内容时, input 的 value 是没有变化的。因为 v-model 并不是指向 input 的 value 。

总结

以上所述是小编给大家介绍的Vue 处理表单input单行文本框的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 #Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 #Javascript
详解微信小程序的不同函数调用的几种方法
May 08 #Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 #Javascript
vue中使用props传值的方法
May 08 #Javascript
vue权限问题的完美解决方案
May 08 #Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 #Javascript
You might like
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
js玩一玩WSH吧
2007/02/23 Javascript
List Installed Software Features
2007/06/11 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
Python手机号码归属地查询代码
2016/05/04 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
vscode调试django项目的方法
2020/08/06 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
业务主管岗位职责
2013/11/20 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
Python中的pprint模块
2021/11/27 Python