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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
js实现右键菜单功能
Nov 28 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
PHP crc32()函数讲解
2019/02/14 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
python将字符串转换成数组的方法
2015/04/29 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Python 互换字典的键值对实例
2019/02/12 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Python模块future用法原理详解
2020/01/20 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
卖房协议书样本
2014/10/30 职场文书
介绍信如何写
2015/01/31 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python