zoukankan      html  css  js  c++  java
  • vue三种常用获取input值写法(转)

    1. v-model 表单输入绑定

    使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

    <template>
            <div>
                <input class="login-input" type="text"  v-model="username" placeholder="请输入账号">
                <input class="login-input" type="password" v-model="password" placeholder="请输入密码">
                <div class="login-button" @click="login" type="submit">登陆</div>
            </div>
        </template>
        <script>
        export default {
           name: 'Login',
            data() {
                return {
                    username: '',
                    password: ''
                }
            },
            methods: {
                login() {
                       console.log(this.username)
                       console.log(this.password)
                }
            }
        }
        <script/>
    2. @input 监听输入框

    输入框只要输入的值变化了就会触发 input 调用 search 数据实时获取通过 event.currentTarget.value 获取到

    <template>
          <div class="class">
            <div>
              <input type="text" @keyup.enter="search" @input="search($event)"/>
            </div>
          </div>
        </template>
        <script>
        export default {
          name: "search",
          data() {
          },
          methods: {
                search(event){
                  console.log(event.currentTarget.value)
                }
              }
        }
       </script>
    3. ref 获取数据

    这种方式类似于原生DOM,但是ref获取数据更方便

    <template>
          <div class="class">
              <input type="text" ref="getValue" />
              <button @click="subbmitButton">获取表单数据</button>
          </div>
        </template>
        <script>
        export default {
          name: "page",
          data() {
          },
          methods: {
                subbmitButton(){
                  console.log(this.$refs.getValue.value)
                }
              }
        }
      </script>
  • 相关阅读:
    ELK--filebeat命令行参数解释
    ELK--filebeat详解
    centOS7 修改DNS
    nginx-日志统计
    ceph 安装ceph问题汇总
    正则 挖网站表格复习
    c#反射优化 表达式树
    combotree 满足条件的节点不可选中
    NHibernate获取实体配置信息(表名,列名等等)
    jqgrid 单元格放超链接文本
  • 原文地址:https://www.cnblogs.com/snowhite/p/14889454.html
Copyright © 2011-2022 走看看