【Vue表单】单行文本框<input>

作者: 德育处主任 | 来源:发表于2019-05-08 22:38 被阅读14次
微信订阅号:Rabbit_svip

用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变量,用来存储输入框的输入的内容。

inputv-model绑定msg

这时输入框输入的所有内容,都会实时更新到msg里。

所以<p>标签里的内容也会实时更新输入框所输入的内容。


微信订阅号:Rabbit_svip

如上图所示。



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

相关文章

  • 【Vue表单】单行文本框<input>

    用vue监听单行文本框是最最最容易的事。 只需用到v-model就能监听。 在data里面创建一个msg变量,用来...

  • Flutter 20 - 表单组件详解

    一、常用表单介绍 Flutter 中常见的表单有 TextField 单行文本框, TextField 多行文本框...

  • 表单组件

    Flutter 中常见的表单有 TextField 单行文本框,TextField 多行文本框、CheckBox、...

  • Flutter(十九):Form 表单

    Flutter 中常见的表单有 TextField 单行文本框,TextField 多行文本框、CheckBox、...

  • Flutter 常用表单介绍

    一.Flutter 中常见的表单 TextField 单行文本框,TextField 多行文本框、CheckBox...

  • 6. JavaScript开发中表格与表单技术(二)

    6.4 设置文本框 表单中的文本框分为单行文本框、多行文本框和密码框,它是表单中非常重要的对象,可以让用户自己 输...

  • HTML5之表单

    在网站中,表单是指收集用户的信息。 一,表单控件 1.文本框:单行文本框(Text input),密码框(Pass...

  • Form表单具体用法

    表单定义 HTML表单是一个包含表单元素的区域, 表单使用 标签创建。 表单属性 表单元素 1.单行文本框 效果...

  • Form表单、浮动框架及CSS

    Form表单 表单标签的构成和形式: 第一个表单项第二个表单项。。。。。。。 到底有哪些表单项? 单行文本框: 其...

  • 笔记3 表单

    表单 表单标签的构成和形式: 其他表单项 单行文本框: value:设定其中的初始文字size:设置其输入框的宽度...

网友评论

    本文标题:【Vue表单】单行文本框<input>

    本文链接:https://www.haomeiwen.com/subject/tquboqtx.html