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 Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 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文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
删除重复数据的算法
2006/11/23 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python创建日历实例
2014/08/21 Python
python操作gmail实例
2015/01/14 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python日志记录模块实例及改进
2017/02/12 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python中PyQuery库用法分享
2021/01/15 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
酒店辞职书范文
2015/02/26 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
Python破解极验滑动验证码详细步骤
2021/05/21 Python
详解Python常用的魔法方法
2021/06/03 Python