Vue 处理表单input单行文本框的实例代码

用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> 标签里的内容也会实时更新输入框所输入的内容。

如上图所示。

需要注意的是，用了 v-model 后，输入框在输入内容时， input 的 value 是没有变化的。因为 v-model 并不是指向 input 的 value 。

总结

以上所述是小编给大家介绍的Vue 处理表单input单行文本框的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• vue 自定义指令自动获取文本框焦点的方法
• 基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
• vue富文本框（插入文本、图片、视频）的使用及问题小结
• vue中使用input[type="file"]实现文件上传功能
• 解决vue中监听input只能输入数字及英文或者其他情况的问题
• vue监听input标签的value值方法
• 解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
• vuejs 动态添加input框的实例讲解
• Vue动态控制input的disabled属性的方法
• vue input输入框模糊查询的示例代码
• vue input 输入校验字母数字组合且长度小于30的实现代码
• vue判断input输入内容全是空格的方法