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 相关文章推荐
js下获取div中的数据的原理分析
Apr 07 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 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与SQL注入攻击[三]
2007/04/17 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php之readdir函数用法实例
2014/11/13 PHP
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
微信小程序 转发功能的实现
2017/08/04 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
pyside写ui界面入门示例
2014/01/22 Python
Python中变量交换的例子
2014/08/25 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
python中pyqtgraph知识点总结
2021/01/26 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
副总经理任命书
2014/06/05 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js