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 相关文章推荐
javascript背投广告代码的完善
Apr 08 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
使用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入门之连接mysql数据库的一个类
2012/04/21 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
js获取form的方法
2015/05/06 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
python日期相关操作实例小结
2019/06/24 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
python def 定义函数,调用函数方式
2020/06/02 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
加拿大时装零售商:Influence U
2018/12/22 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
华为C++笔试题
2014/08/05 面试题
个人简历的自荐信
2013/10/23 职场文书
学生会干部自荐信
2014/02/04 职场文书
精彩广告词大全
2014/03/19 职场文书
项目负责人任命书
2014/06/04 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
中英文求职信范文
2015/03/19 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python