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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
js中开关变量使用实例
Feb 24 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
Jquery Fade用法详解
Nov 06 jQuery
使用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 MemCached高级缓存配置图文教程
2010/08/05 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
python 文件查找及内容匹配方法
2018/10/25 Python
详解Python循环作用域与闭包
2019/03/21 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
python openCV自制绘画板
2020/10/27 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
培训专员岗位职责
2014/02/26 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
房产协议书范本2014
2014/09/30 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
2014年底工作总结
2014/12/15 职场文书
护理实习生带教计划
2015/01/16 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
create-react-app开发常用配置教程
2022/06/25 Javascript