Vue三种获取input值的方法

最新推荐文章于 2025-02-22 12:00:00 发布

原创最新推荐文章于 2025-02-22 12:00:00 发布 · 6.1k 阅读

CC 4.0 BY-SA版权

本文详细讲解了如何在Vue中使用v-model实现表单输入的双向数据绑定，包括`input`和`@keyup.enter`监听器的应用，以及如何结合Vuex管理状态和ref获取表单数据。实例中还涉及了El-Form组件和验证规则的设置，以及在实际场景中刷新缓存的操作。

部署运行你感兴趣的模型镜像

(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>

实例：======================================================实例====================================================================

<template>
  <div class="user">
    <basic-container>  <!--label-suffix=":" 属性会在label标签的末尾加上该符号 -->
      <el-form :inline="true" ref="refreshRules" :rules="cacheRules" :model="cacheModel" label-width="120px" label-suffix=":">
        <el-form-item label="请输入缓存key" prop="cacheKey">
          <el-input v-model="cacheModel.cacheKey" placeholder="请输入要刷新的缓存key" style="width: 700px;" ref="cacheKeyValue"></el-input>
            &emsp; &emsp; <el-button type="warning" round size="medium" @click="handleRefreshCache()">立即刷新</el-button>
            <el-button type="info" round  size="medium" @click="reset()">清空</el-button>
        </el-form-item>
      </el-form>
    </basic-container>
  </div>
</template>

<script>
import { putObj} from "@/api/pay/cache/redisCache";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
        cacheModel: {
            cacheKey: '',
        },
        cacheRules: {
                cacheKey: [{ required: true, message: '缓存Key不能为空', trigger: 'blur' }]
        },
       
      }
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  watch: {
    role() {},
  },
  created() {
    this.business_user_add = this.permissions["business_user_add"];
    this.business_user_edit = this.permissions["business_user_edit"];
    this.business_user_del = this.permissions["business_user_del"];
  },
  methods: {
    reset() {
	  this.$refs['refreshRules'] .resetFields()
	},
    handleRefreshCache() {
        this.$refs['refreshRules'].validate(valid => {
           if (!valid) {//如果验证不通过，则不走下面的方法内容
               return false;
           }
            putObj(this.$refs.cacheKeyValue.value).then((response) => {
              let resultCode = response.data.code;
              if (resultCode === 0) {
                this.$message.success("已刷新");
              } else {
                this.$message.error("刷新失败");
              }
            })
            .catch((e) => {
              this.$message.error(e);
            });
       });
    }
  }
}
</script>