vue三种常用获取input值方法

- 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/>
- @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>
- 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>
4.使用elementplus框架+常用双向绑定实战,双向绑定可随时更新数据,且全局有效
<template>
<div>
<el-form :model="ruleForm" ref="ruleFormRef" size="default" label-position="left" label-width="110px" >
<el-row :gutter="35">
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
<el-form-item label="编码" prop="code">
<el-input v-model="ruleForm.code" placeholder="编码" clearable/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
</el-col>
</el-row>
</el-form>
<el-button type="primary" @click="Aclick" size="default">点击获取input值</el-button>
</div>
</template>
<script lang="ts" setup name="airInEditDialog">
import { ref,onMounted,reactive, } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
//自定义参数
const ruleFormRef = ref();//表单响应式
const ruleForm = ref<any>();//表单信息
// 页面加载时执行的方法
onMounted(async () => {
//使用双向绑定v-model,赋值input框
ruleForm.value.code = "ABCD";
});
//点击按钮获取input值
const Aclick=()=>{
//使用双向绑定v-model,获取input值
ElMessage.success("input的值为:"+ruleForm.value.code);
};
</script>